• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2013 web programming notes
 

2013 web programming notes

on

  • 1,798 views

 

Statistics

Views

Total Views
1,798
Views on SlideShare
1,798
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Direct quote from SACE Subject Outline
  • MostlyDirect quote from SACE Subject Outline

2013 web programming notes 2013 web programming notes Presentation Transcript

  • Web Programming SACE IT REVISION WORKSHOP 2013
  • Client Side Programming  Client Side Programming (Web Programming)  Languages such as JavaScript  The source code is loaded by the browser and run by the browser  The source code is visible to any user  Server Side Programming (Dynamic Websites)  Languages such as PHP, ASP, JSP  The source code is loaded by the web server and run by the server  The source code is not visible to users
  • Websites  Web programming involves understanding the structure of web pages:  HTML (HyperText Markup Language)  Forms (including different input types and buttons)  Pop-Ups (Prompt, Alert, Confirm)  Tables (although preferably use CSS for layout)  Keywords include Tag, Element, Attribute  CSS (Cascading Style Sheets)  Separating the style from the content  Also used for layout  Media (eg. Images, audio etc.)  There is a need to optimise and compress media appropriately to reduce file size and improve the user‟s experience (while not compromising the quality too much)
  • CSS (Cascading Style Sheets)  Advantages for the End User:  More consistent website  “Themes”  Accessibility  Reduced file size reduces download times  Less prone to errors  Advantages for the Developer  Separation of content from style assists in managing larger projects  Keeping style code in one location (eg. External style sheet) makes it far easier to make changes  Less prone to errors (because the style is defined once, not duplicated on every page)
  • Control Structures  Sequence  The order of commands in a program  An “algorithm” is a sequence of commands to solve a problem  Selection  IF statements provide a branch where the program will perform different commands depending on something (eg. if(x<0) {alert(“Must be a positive number”);}  Iteration  Loops, used for doing a sequence of commands a variable number of times (0 or more)  For  While
  • Data Structures  Variables  Store one piece of data  Various data types include numbers, strings (text) and boolean (T/F)  Scope of Variables (Local vs. Global)  Cookies  Used to store named pairs of data in a browser (similar to variables, but persistent, until they expire)  Arrays  Store lists of variables  Can be associated lists (eg. rating[“Minecraft”] = 5; )  (Other, such as objects etc. – not required by SACE)
  • Cookies  Web pages are „stateless‟ (this means that by themselves they have no idea what page the user has just been on, what buttons has been clicked or what data they have inputted on a previous page)  One way of storing data that can be accessed by other pages on a website is the use of cookies.  A cookie is a variable that is stored in the browser. Cookies remain in the browser until they expire or the browser deletes them.  Cookies can be used to store information about user preferences or other information. Each time you visit the site that a cookie is created with, the information about you is available. This is sometimes very useful in remembering your preferences, but can endanger your privacy.
  • Functions  Functions (aka Procedures, Subroutines) are used to break a problem into manageable parts.  A function consists of a group of statements that logically below together for a particular purpose.  Parameters / Arguments  Data given to the function (eg. round(1.324, 2) has 2 parameters, which are the value to round, and the number of decimal points to round it to)  Return values  What does the function „give back‟ to the program? (eg. round(1.324, 2) will return a decimal number, in this case 1.32) – this could be a number, a string, a boolean (T/F) or any other data structure / type  Some functions don‟t return any values
  • Errors  Errors come in a few different types:  Syntax errors (words misspelled or brackets missing etc.)  Logical errors (an error with the logic / algorithm)  Runtime errors (an error that occurs during the running of the software, for example, the software is dividing 2 numbers, but the denominator is 0 at this point in the running which will create an error)  Debugging techniques should be employed to identify errors  Outputting variables (temporarily)  Commenting out code to test individual parts / functions  Testing with different data / input (including invalid data)
  • Responsibilities of the developer  Recommended practices and conventions include  using a logical, hierarchical folder structure to enable seamless maintenance of the website  maintaining original files separately from the uploaded site  using comments within the code (and indentation where appropriate)  testing code offline to eliminate errors  using a range of techniques that enhance speed of delivery and address standards of accessibility  uploading web pages and associated files to a web server.  Layout and navigation should be easy to use.
  • Legal and Ethical Responsibilities  Responsibilities include the following  data entered must be collected and transmitted accurately  the inclusion of media on a website may require use of third-party products (e.g. plug-ins)  the media and code used to develop a website may be protected by copyright  media must be acknowledged and referenced appropriately  content should adhere to legislation on anti-discrimination and non- offensive material and be sensitive to social and cultural practices and values.  National Privacy Principles (privacy.gov.au) need to be adhered to
  • Impacts  New and emerging website technologies and industry-based web applications have  implications for conducting business and delivering education now and in the future (e.g. collaborative and social software)  an impact on the development and direction of the industry.  Investigate ways in which interactive websites have changed the work practices, procedures, and decision-making processes of individuals, organisations, and communities.  Examples: Online banking, globalisation / online stores, Web 2.0 technologies, wikis, blogs, Google Docs / Microsoft Web Apps
  • 2011 Exam
  • Only one selection per group is allowed so a set of radio buttons will stop multiple selections within each group and reduce the need to validate the user input
  • Roll dice is a button which acts as a trigger to execute the code and start the program running This button will call a function (method / procedure), possibly via an onclick attribute which will run the code.
  • <input type=radio name=number_rolls Checked> or in pseudo code: number of rolls =6
  • diceRoll = new Array For (x=1; x<=number_of_rolls; x++) { diceRoll[x] = random (1, number_of_sides) }
  • total = 0 countSides = new Array for (x=1; x<= number_of_sides; x++) { countSides[x]=0; } for (x=1; x<= number_of_rolls; x++) { countSides[diceRoll[x]]++; total = total + diceRoll[x]; } for (x=1; x<=number_of_sides; x++) { output x + “ was rolled “ + countSides[x] + “ times” } Output “Total = “ + total
  • 1 was rolled 0 times 2 was rolled 1 times 3 was rolled 0 times 4 was rolled 1 times 5 was rolled 1 times 6 was rolled 0 times Total = 11
  • CSS is used to control the style (look and feel) of the web page. This would allow the form to look consistent including its colour, size, background and fonts. It can also be used for the layout of a page (including forms) and generally means there are less errors in the coding of pages because the styles are defined once only.
  • A cookie is a variable that is stored in the browser. Cookies remain in the browser until they expire or the browser deletes them. Cookies can be used to store information about user preferences or other information. Each time you visit the site that a cookie is created with, the information about you is available. This is sometimes very useful in remembering your preferences, but can endanger your privacy.
  • Recommended practices and conventions include: • using a logical, hierarchical folder structure to enable seamless maintenance of the website • maintaining original files separately from the uploaded site • using comments within the code (and indentation where appropriate) • testing code offline to eliminate errors • using a range of techniques that enhance speed of delivery and address standards of accessibility • uploading web pages and associated files to a web server. Layout and navigation should be easy to use.
  • Another Sample Exam Question
  •  Ray has a Roof Restoration business. They have just established an online quoting system for roof restoration.
  •  A) Identify 2 HTML elements associated with the quoting system (see the image above) and state the role that they play in helping to create the quoting system. [4 marks]  Form, Input text Boxes, check box, (Submit) button (note, radio button is not an appropriate element). Other possible answers could be table, heading, but they don’t actually play a specific role in creating the quoting system. A script element could also be mentioned and this would be applicable, as it is likely there will need to be some script (such as javascript) to run the quote.  Good explanations would include: input text box is used for the potential customer to input the details of their quote. Button is used to activate the form and run the code to generate the quote.
  •  B) Identify 1 input element which could be improved by using a different element, and suggest the improvement. [2 marks]  Type of restoration would be better as either a SELECT (combo) box, or a set of radio buttons to help ensure the user only enters valid data.
  •  C) Outline at least one field which would require some error checking before providing an appropriate quote and suggest the algorithm that would detect valid input of that element. [2 marks]  All text fields would require some sort of error checking, but better is to recognise that area should be a number and it should be positive.  Algorithm would be: if (area >0) { valid = true} // or possibly (area>=5) or some value that is their appropriate minimum area  Another valid answer would be that the Type should be one of the possible options (although better as a combo box, see previous question).  If (type==”clean” OR type==”paint” OR type==”coat”) {valid = true}  Other not so good, but possible answers (not so good because they wouldn’t actually affect the quote): Name should not be blank, email should include an @ symbol
  •  D) Given that Cleaning costs $20 per square metre, painting costs $50 per square metre and coating costs $70 per square metre, write an algorithm to process and output the quote appropriately. [4 marks]  If type=clean  Totalcost = 20*area  Else if type=paint  Totalcost = 50*area  Else if type=coast  Totalcost = 70*area  Output totalcost
  •  E) Currently, Ray hasn‟t implemented any cookies in his website. Suggest a way that cookies could be included and the role they might play in Ray‟s Roof Restoration website. [3 marks]  Cookies could be implemented to remember the customers details when they come back next time. It could automatically prefill the quote and just allow the customer to change appropriate values. They could also be used to ‘welcome them back’ and create a different welcome message since they are a previous visitor of the website.
  •  F) Ray gets a report at the end of each week with the details of all quotes that were run on the website during the week that wanted to be contacted to discuss the quote further. Given that all of the details for quotes would be stored in a number of arrays (called name, email, type, area and contact) write the algorithm that would process this data and output the details for Ray. [3 marks]  For (x in name)  {  If (contact[x]==TRUE)  { Output Name[x] + Email [x] + Type [x] + Area [x] }  }
  •  G) Explain the main advantages of using CSS for the developer of Ray‟s Roof Restoration website. [3 marks]  Note – not for the end user.  Styles are defined once and then applied across an entire website (eg. each form on the website would automatically get the style shown above).  Styles in one location makes it easier to make changes / updates.  External CSS can provide an easy way of changing the entire look of the website.  Less prone to errors because style definitions are only defined once in one location.
  •  H) Identify recommended practices and responsibilities of the web developer working on Ray‟s Roof Restoration website. [4 marks]  Ensure the layout and navigation of the website is user friendly.  Using a logical, hierarchical folder structure and file naming strategy.  Testing all code to ensure there are no errors.  Ensuring that the quoting system provides accurate quotes otherwise Ray could be held responsible to do the job at that price.  Maintaining original files offline.  Ensuring the website is accessible to all possible clients (including a variety of browsers, mobile platforms etc.)  Ensuring that media (images etc.) used on the website are optimised to reduce download time.  Using comments throughout the code so that improvements / changes can be made easily.