Homework_5

Stage 0 notes
1. Internet, Web, HTML

Web is a collection of internet pages. Pages is made from HTML. Users send requests to servers which store pages. Contents of HTML include hyper links, text, images and links to other pages. 30 billions pages.

2. Making HTML

Tags or elements are marks that tell computer to display contents in certain way. 2 types of tags are inline and block. Inline ignores whitespace;block put content in a box. Format is <tag_name> content </tag_name> Arrtributes are used within the tag to make specifications.

3. Example

<a href = "http://www.rogerfederer.com"> link </a> append this link

Stage 1 notes
1. HTML CSS Javascript

They are all programming languages for making webpage. HTML is for the structure;CSS is for the style;Javascript is for the interactive elements.

The structure used to write HTML and organize elements in a webpage is like a tree.

screen of the app

Note: DOM(Document Object Model) refers to the tree structure.

Tips: Use Chrome to open any webpage and open tools-Developer tool to see the source code of this webpage.

2. HTML structure and BOX model

All elements in the webpage are rectangular enen though they are displayed as other shapes. These elements can also be viewed as box in HTML environment. "div" is the tag name to include a box, followed by some attributes named "class" in HTML. By making structures like this in HTML, sorts of content can be classified hierarchically. Also, the structure enables the browser to recogize to correct pattern and part to be correctly displayed. What's more, it brings easy readability for other people who need to review the HTML code. See a example HTML code here:

screen of the app
3. Use CSS

CSS stands for Cascading Style Sheets. It used to add styles to our webpage. CSS has a important propery: inheritance. In the tree, the children can inherit the properties of their parents. Note that descendant only inherits text-related property not box-related property. Befefit of inheritance:

    -Avoid repetitation, make the code more organized and simple to make changes. For example, if we want to change font of name for each pair of shoes in a shopping webpage, we just need to change one line of code in the "shoe name" class in CSS file.
    -Enable fast-loading webpage
    -Clients save money on bandwidth

An example of CSS code
h1 {
     color: red;
} A full structure of box contains margin, border, padding and content.

Stage 2 notes
1. Computer and program

A computer is a device that can be programmed to carry out a set of arithmetic or logical operations automatically. A computer program is a sequence of instructions which tells computer what to do. To make the computer do things, we need to communicate with computer with programming languages. We have to write or code these instructions in a programming language like Python so that the computer can understand efficiently and accurately. Examples of computer programs include a web browser, a text editor or Python.

2. Python programming

Python is a high-level programming language as compared to low-level or machine language that deals with machine code. It means that the code we write is highly abstract and will not run on top of computer directly. It is interpreted by Python interpreter that translates our Python code to instructions that computer can follow.Typical Python expression will be like:
print 4 - 5
print 24 * 7 * 365

3. Variables and Strings

A variable is a named memory location to store data that can change/vary. A variable can be given a value through an assignment statement. In Python, this statement assign a integer value 10 to a variable my_int.
my_int = 10
String is a data type in Python. To create a string variable, we can use single, double or triple quotes. Examples:
string_1 = 'python'
string_2 = "I loving playing tennis!!!"
Indexing system can be used to subsetting a string.

4. Input->Function->Output

A function is something that takes input, does something to that input, and then produces output. For example, a function named sum might take a sequence of numbers as input and produce the sum value of that list as output. Syntax:

   def functionname(parameter):
                  code block
                  return statement

Defining a function only gives it a name, specifies the parameters that are to be included in the function and structures the blocks of code. Once the basic structure of a function is finalized, we can execute it by calling it from another function or directly from the Python prompt. The value in the return statement is the output result. If the function doesn't have a return, the call will not obtain anything from calling this function.

5. Lists and Loops

A list is a structure data structure in Python to store a sequence of any type data elements. To create a list use expressions like:

    list1 = ['Python', 2000]
    list2 = [1, 2]
    list3 = ["a", "b", "c", "d"]
We can use a For or a While loop to iterate over structured data. Also some useful operations on list are illustrated as following:
      list1 = list1 + [2015, 2016] 
      #list1 is now ['Python', 2000, 2015, 2016]
      list2.append([2015, 2016])
      #list2 is now [1, 2, [2015,2016]]

Stage 3 notes
1. Object Oriented Programming

Object Oriented Programming, or OOP, refers to the method of programming that invokes the use of classes to organize the data and structure of an application. Python has been an object-oriented language. Typically, this means that using the "Objects" and "Classes" as tools to build a program. Large programs are very difficult to write. Object Oriented Programs force designers to go through an extensive planning phase, which makes for better designs with less flaws. In addition, once a program reaches a certain size, Object Oriented Programs are actually easier to program than non-Object Oriented ones.

Though HTML isn't a programming language which does not allow OOP strictly, we can still apply abstract thinking or OOP concept in HTML and CSS. Almost every element on a styled Web page has different visual features that are repeated in different contexts. On the other hand, other generally invisible features (i.e. “structure”) are likewise repeated. When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result. In html, head element contains data that apply to each other element (like charset) an thus do not need to be repeated. Attributes like class are then used in css to apply one style definition to all tags which contain that class. This is actually quite similar to python classes which "apply" class variables and methods to all object of that class. In both case, you avoid repeating codes.

2. Classes and objects

A class is like a blueprint or prototype where the user defines a set attributes including data members and methods. The concept object is a unique data structure defined by its class. An instance is just an individual object of a certain class; it contains bota data and procedures/methods.
For example, we can define a class named Employee, where we can define different methods to get and set any attributes. We can also define an constructor which is used to created an instance. The following code defines a class called Employee, which represents the employees in a company. Because basically all the employees are associated with common attributes like name, salary and company ID, we define this class in a way of abstract thinking. A class serves as a template for all objects whose type is that class.

    class Employee:
        # this is a constructor
        def __init__(self, name, salary):
              self.name = name
              self.salary = salary

        def get_name(self):
              return self.name
To use Emplyee class, in another .py file, we can create instance objects using the following code. As a user we only need to know how to use the Employee class to create new object and call functions without knowing the implementation details. This is called abstraction which is basically separating interface from implementation.

      #This would create an object of Employee class
      emp1 = Employee("Mark", 5000)
      #This call prints the name of this employee
      print (emp1.get_name())

3. Python module and library

Modules in Python are simply Python files with the .py extension, which implement a set of functions. Modules are imported from other modules using the "import" command. The Python standard library comes with a number of modules that can be used both as modules and as command-line utilities. For example, if we want to import the module urllib, which enables us to create read data from URLs, using the following syntax:

    # import the library
    import urllib

    # use it
    urllib.urlopen(...)

4. Inheritance

Inheritance is a feature supported by Python for reusing code. For example, with the Employee class as a perent class, we can define a child class called Manager. The child class inherits the attributes of its parent class, and we can use those attributes as if they were defined in the child class. A child class can also override data members and methods from the parent.

Stage 4 notes
1. Servers

A server is a application system that uses client/server model to provide essential services and information across a network. Servers are able to process requests from clients/users and response with web pages and data. The communication between client and server is often via a standard called HTTP(Hypertext Transfer Protocol) in a HTML format. The client commonly initiates the communication using a web browser by making a request for a specific resource then the server responds with the content. The Internet is full of servers and clients. Requesting a web page may involve communication amoung many various kinds of servers aroung the world.

There are two main types of request: GET and POST. GET requests data from a specified resource whereas POST submits data to be processed to a specified resource. GET request can be cached whereas POST can not. GET has restrictions on data length whereas POST has not. GET is less secure compared to POST because data sent is part of the URL. POST is a little safer than GET because the parameters are not stored in browser history or in web server logs

2.Input Validation

When implementing a web server program, it is important to verify the input data from users for several reasons. First, user input may intentionally harm the server. Second, by validating form data while the user is filling it out, the user can know immediately if they've made any mistakes; this saves the user the time of waiting on an HTTP response, and saves your server from dealing with bad form input.

3.HTML Templates

The use and concept of HTML templates is similar as inheritance in object-oriented programming in JAVA and Python. This allows us to reuse some base element when designing a website with many pages, which avoids writing a large amount of repeteated code. When we need to change the shared element of the project, we only need to change the template code that are shared and inherited by other descendants, instead of changing the common code for every page/file. This way we are less likely to make mistakes and it is easier to maintain and update the code for our project.

Stage 5 notes
1. APIs and XML

API, an abbreviation of application program interface, is a set of routines, protocols, and tools for building software applications. One of the topics in course 5 focuses on Web APIs. These are defined intefaces that provides programmable interfaces to a set of services to different applications. Here we uses API to let servers exchange information amoung systems that use different technologies.
When used in the context of web development, an API is typically defined as a set of Hypertext Transfer Protocol (HTTP) request messages, along with a definition of the structure of response messages, which is usually in an Extensible Markup Language (XML) or JavaScript Object Notation (JSON) format. XML is a markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable. There are several existing APIs for XML processing. Using the xml.dom.minidom library in Python, we can let servers communicate with each other by exchanging XML format data. An example is shown at the end of this page showing a Google map image with users location displayed.


Add comment




Date: 2015-07-14 19:50:45.709450
comments from Millbrea, CA
---from me_mac
Date: 2015-07-01 18:25:53.741100
ip testing
---from me_ local
Date: 2015-07-01 18:23:46.449830
testing
---from me_ local
Date: 2015-07-01 18:20:42.218940
,aaaaaaaaaaaaaaaa, dP" "8, `Y, d' )Y, `Yaa d' ,P Y, ,P d' ,P Ya ,P `"aa, ,P d' ,P "baP `"""""" ,aa, Y"""""""Y, aP' `Y, ,P Ya, ,P"' `Y, ,P `Y `b `Y, ,P ,d"' `b )P "b ,d' ,a, `b ,d' "b ,daaaaaaaaa ,P 8aaaabaaadP' "b ,8' 8 ,P d' "b,8' 8 ,P d' "8 8 `b d' "b, 8 `b d' `"""""""""" `b 8"""""'
---from me_ local
Date: 2015-07-01 18:12:27.202510
▇ ▅ █ ▅ ▇ ▂ ▃ ▁ ▁ ▅ ▃ ▅ ▅ ▄ ▅ ▇
---from me_ local
Date: 2015-07-01 18:11:26.504380
༼ つ ◕_◕ ༽つ
---from me_ local
Date: 2015-07-01 18:02:43.695060
testing ip
---from me_local
Date: 2015-07-01 18:02:12.050600
new comments
---from me_ local