-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathstage3.html
More file actions
244 lines (199 loc) · 12.5 KB
/
stage3.html
File metadata and controls
244 lines (199 loc) · 12.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<title>
Intro to Programming: Stage 3
</title>
<link rel="stylesheet" href="css/intro.css">
</head>
<body>
<div class="navigation-bar">
<ul>
<li><a href="IntroToProgrammingNotes.html">Stage 1:</a></li>
<li><a href="Stage3.html">Stage 2:</a></li>
</ul>
</div>
<div class="stage">
<h1>Stage 3: Adding Videos to Your Page</h1>
<div class="lesson-title-box">
<h2>Stage 3 Table of Contents</h2>
<div class="concept">
<div class="content">
<ul>
<li><a href="#vocabulary">Vocabulary</a></li>
<li><a href="#process">Movie Website Process</a></li>
<li><a href="#summary">Summary</a></li>
</ul>
</div>
</div>
<h2>Stage 3 Vocabulary<a name="vocabulary"></a></h2>
<div class="concept">
<div class="concept_title">
<h3>Class</h3>
</div>
<div class="content">
<p>
A way to tell Python to create a new type of "thing". A class can also be compared to a blueprint that can hold data and methods. We then use that blueprint to create new things. Classes are very important to object oriented programming because it allows us to re use code.<br>ex: We created a media.py file that contained the class Movie that took instance variables like movie title, storyline, the poster image and the youtube trailer. Once created we could then create as many instances of class movie re using the same code every time.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Object</h3>
</div>
<div class="content">
<p>
Two meanings: the most basic type of "thing", and any instance of some thing.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Instance</h3>
</div>
<div class="content">
<p>
When you use your created classes for something. <br> ex: toy_story and our other movies are an instance of the class Movie. We reused our class movie over and over to add each movie to our movies webpage.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Self</h3>
</div>
<div class="content">
<p>
Inside the functions in a class, self is a convention for the instance/object being accessed. You could use any other word in place of self but since it is widely used it will make your code more readable.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Inheritance</h3>
</div>
<div class="content">
<p>
The concept that one class can inherit traits from another class, Much like you and your parents. Designing code using inheritance allows you to reuse already written code to add and ammend throughout your program.<br><br>
How to use: When you want one class to inherit variables from another class add the inherited class name as an argument in the new class. ex: class Child(Parent):<br><br>
Doing this allows you to access the class and instance variables in the original class inside your new class. Within our inheritance.py file we had a class named parent that took last_name and eye_color as instance variables, then when we created class Child pulling those class and instance variables in, reusing the code and then adding another instance variable for number of toys.<br><br>
<img src="Screenshots/inheritance.png" alt="inheritance">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Constant Variable</h3>
</div>
<div class="content">
<p>
When defining a constant variable the google python style guide calls for it to be named in all caps. These are variables that we don't plan on changing or modifying throughout the program. For example, we had movie ratings in our movies webpage as a constant variable because those would never change.
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Class Variables</h3>
</div>
<div class="content">
<p>
Variables attached to classes. These are for attributes and methods that will be shared by all instances of the class. ex: our VALID_RATINGS variable will be shared by every instance created from class Movie.<br><br>
<img src="Screenshots/ClassVariable.png" alt="Class Variable Example">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Definition Screenshot</h3>
</div>
<div class="content">
<p>
<img src="Screenshots/ClassDefinitions.png" alt="Python Class Definitions">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Module</h3>
</div>
<div class="content">
<p>
A source file within your python program that you can import into other files to use things like classes that are built somewhere else. In object oriented program it's good practice to build your classes in one file and then import and pull code as you need it throughout your program to stay organized.<br><br>
Within the movies website we had one file (media.py) that held our class Movie which was our blueprint. Then we had entertainment.py that stored all of the instances of that variable. If we wanted to add more things to the website like tv shows, it would have been a good idea to build those classes in media.py and create another file just for TV shows to keep movies and tv shows separate.
<br><br>
example: webbrowser is a module within python that we can import so that we can show the movie trailers.
<img src="Screenshots/module.png" alt="module example screenshot">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Method Overriding</h3>
</div>
<div class="content">
<p>
This is used during inheritance. When you create a new class and you want to pull code from another class without duplication you'll want to create the new class and override the original method. We do this by passing in the original class name as an argument in the new class name and then calling the specific methods in the ancestor class that you want to change or modify. Think of this like a filter.<br><br>
<img src="Screenshots/MethodOverride.png" alt="Method override example">
</p>
</div>
</div>
</div>
<div class="lesson-title-box">
<h2>Movies Website Process<a name="process"></a></h2>
<div class="concept">
<div class="concept-title">
<h3>Step One</h3>
</div>
<div class="content">
<p>
First we created a file named media.py. This file holds all of our blueprints for the content that we then will create. For now since we only have one type of content (movies) we only have one class or blueprint made. Within this class we have 1 class variable (VALID_RATINGS) then an init contstructor with the instance variables that will hold data.<br><br>
We also added an instance method show_trailer to open a web browser and show the trailer for each movie.<br><br>
<img src="screenshots/media.png" alt="media.py screenshot">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Step Two</h3>
</div>
<div class="content">
<p>
Next we created entertainment_center.py. This is where we put all of our content that we want to display (favorite movies). To do this we had to import media.py so that we could access our class Movie (blueprint). Then we created an instance of class Movie for our favorite movies passing in all the arguments that it requires like title, storyline, cover photo and youtube trailer link. At the bottom of this code we also stored all of our movies into a variable that is then called in another file to start applying these instances to html to output on our webpage.<br><br>
<img src="screenshots/entertainment_center.png" alt="entertainment center screenshot">
</p>
</div>
</div>
<div class="concept">
<div class="concept-title">
<h3>Step Three</h3>
</div>
<div class="content">
<p>
Then we created fresh_tomatoes.py which included our html and css. Along with that we created a loop that pulls each movie from entertainment_center.py and places it within the html and css to make each movie display on the page correctly.<br><br>
<img src="screenshots/fresh_tomato_loop.png" alt="Fresh Tomato Loop">
</p>
</div>
</div>
</div>
<div class="lesson-title-box">
<h2>Summary<a name="summary"></a></h2>
<div class="concept">
<div class"concept-title">
<h3>Object Oriented Programming</h3>
</div>
<div class="content">
<p>
When writing code in Python copy and pasting code is never a good idea simply becuase if you ever wanted to change that code you would have to remember every place that you pasted to change the code there as well. Also code will always be changed/altered as the project grows. As your program gets more and more complex creating classes for content that will be duplicated will make it easier to go back and change or edit.<BR><br>A perfect example is my notes website. If you read the code you can tell that there are 3 pages, one for each stage but all of the HTML is duplicated to create another section or concept. Each section contains a concept title and content related to the concept. If I ever wanted to change each section and add an example for each concept I would have to go and edit every concept in this webpage.<br><br>
What would be better is if I could use python and create a class for a "concept" that took arguments for a title and description.<br><br>
<img src="screenshots/classMyContent.png"><br><br>
Then once I was done I wanted to go back and add an "example" for each concept I could with ease. The steps to do that would be to add a new member variable for my content class for "example".<br><br>
<img src="screenshots/classMyContentExample.png"><br><br>
As my notes webpage gets more and more complicated I could keep editing that class to add more items that would be related to each content box. One other thing that I learned from the article linked in my first submission review was the need to keep related functions inside the classes that they are used for to keep the code readable. As the project got bigger this would be a must so that related functions wouldn't get overlooked. Your classes overtime kind of become a table of contents section of a book. If you go to the code for this class (chapter) it will include all of these things(chapter content or sections).<br><br>
In stage 2 we learned how to do this with functions but it used lists and indexing to find which content to put where. If we were to rewrite that into a class it would be much cleaner.<br><br>
HTML/CSS classes and Python classes work in a similar way which is a good example of how a class works. Each CSS class on this webpage is a blueprint so that I can re use the class over and over again to get the same result without copy and pasting. I then could go change anything about that blueprint in my intro.css and it would change throughout the whole website eliminating the possibly of error.<br><br>
The other way to do this would be to go through and add inline CSS to each section but then if I ever needed to change the font color or size I would have to do it for every instance. In summary intro.css is a file that contains multiple blueprints for various sections that I have setup and whenever I need to create another section I just pull from those blueprints to create new instances of the CSS classes or id's.<br><br>
This is a good example of Object Oriented Programming in HTML because if anyone was to read the code or wanted to make a change to the "concept_title", they could find that in my intro.css folder and make the change without causing any errors.
</p>
</div>
</div>
</body>
</html>