-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
205 lines (205 loc) · 9.69 KB
/
index.php
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
<!DOCTYPE html>
<html lang="eng">
<!- Header for data design project page.->
<head>
<meta charset="utf-8"/>
<title>Data Design Project</title>
</head>
<!-Body for Dat Design Project page->
<body>
<!-Heading one " The Onion: America's Finest News Source->
<h1>The Onion: America's Finest News Source</h1>
<!-Paragraph explaining The Onion and its content->
<p>The Onion is a satirical news outlet that is found on the web at <a href="http://www.theonion.com" target="_blank">www.theonion.com</a>.
The satirical content is composed of articles, graphics, videos, and headlines with a picture.
The content is categorized in different sections based on the subject matter. The sections are as follows:
</p>
<!-List of sections on The Onion homepage->
<ul>
<li>Video</li>
<li>Politics</li>
<li>Sports</li>
<li>Local</li>
<li>Business</li>
<li>Entertainment</li>
<li>Science & Technology</li>
<li>After Birth</li>
</ul>
<!-Heading two "Data Design Analysis">
<h2>Data Design Analysis</h2>
<!-Paragraph explaining the data design project->
<p>For my data design project I will evaluate the usage scenarios for both a specific article and for a category.
</p>
<!-Links to the subjects of the data design project->
<h2>Data Design Analysis Subjects</h2>
<!- List of subjects->
<ol>
<li><a href="http://www.theonion.com/article/bernie-sanders-repeatedly-scolded-attempting-union-51537"
target="_blank">
Bernie Sanders Repeatedly Scolded For Attempting To Unionize Debate Moderators</a></li>
<li><a href="http://www.theonion.com/section/politics/" target="_blank">Onion Politics</a></li>
</ol>
<h2>Personas</h2>
<p>A persona is a hypothetical written description of an end user who will use your product.
Personas are used to model hypothetical use case scenarios for your product.For my data design analysis I have
invented two personas that could potentially access America's Finest News Source</p>
<!-List of Personas covered in Data Design Project->
<ul>
<!-Stefon the Barista->
<li><h3>Stefon</h3></li>
<img src="img/stefon.jpg" alt="Stefon the Barista">
<p>Stefon is a 16-35 year old male who is tech savvy with a good sense of humor. When it come to politics
, there is no doubt that Stefon leans to the left. Stefon actively seeks out and shares content from
the screen of his MacBook Pro or his iOs device.
</ul>
<!-Use scenario for Stefon the Barista->
<h2>Use Scenario</h2>
<p>Stefon just cracked open a fresh growler of La Cumbre Elevated IPA. The only fitting way to relax
after a long day's work creating artisanal graphics and logos in the free-range design studio at the
local print shop. After Stefon locks up his 1968 vintage Schwinn that he personally modified with a fixed
axle, he loves drinking La Cumbre Elevated IPA, which is a locally sourced craft beer and sitting down
with his 2012 MacBook Pro, where he spends his miserable life stirring up political drama on Facebook.</p><br>
<p>There are several steps Stefon must take in order to accomplish his goal. These steps are listed in
the table below, with the corresponding actions taken by the Onion website.</p>
<!-Table of steps taken by Stefon and The Onion during completion of his use scenario->
<table>
<tr>
<th>Stefon</th>
<th>The Onion</th>
</tr>
<td>
<ol>
<li>Open Web Browser</li>
<li>Navigate to www.theonion.com</li>
<li>Activate the drop down menu by clicking the button on the far left of the header.</li>
<li>Mouse down past the search bar and video category, to politics.</li>
<li>Click politics.</li>
<li>Read article.</li>
<li>Stefon repeats steps 4-5 until he finds a story worth sharing.</li>
<li>Stefon finds<a href="http://www.theonion.com/article/bernie-sanders-repeatedly-scolded-
attempting-union-51537" target="_blank">
Bernie Sanders Repeatedly Scolded For Attempting To Unionize Debate Moderators</a></li>
</td>
<td>
<ol>
<li>The Onion chills.</li>
<li>The Onion Sends the requested Data to the browser.</li>
<li>The Onion opens the drop down navigation menu in the foreground.</li>
<li>The Onion changes the color of the text from black to gray.</li>
<li>The Onion navigates to www.theonion.com/section/politics/.</li>
<li>The Onion Chills</li>
<li>The Onion repeats steps 4-5 until Stefon finally finds a story worth sharing.</li>
<li>The Onion delivers the content referenced in the link.</li>
<li>The Onion opens a new window and activates the necessary link to share content to
Facebook.The Onion also communicates with Facebook to determine if Stefon is logged into
Facebook.
Once The Onion knows Stefon is logged into Facebook, it then verifies it has Permission to
post to Facebook. Facebook also verifies that The Onion has permission to post.</li>
<li>The Onion chills.</li>
<li>The Onion captures Stefon's text and applies it to the post.</li>
<li>The Onion communicates with Facebook and posts on Stefon's behalf.</li>
<li>The Onion chills.</li>
</ol>
</td>
</table>
<ul>
<!-Persona Grandma Sally->
<li><h4>Grandma Sally</h4></li>
<img src="img/sallyonion.jpg" alt="What's This Onion?">
<p>Grandma Sally is a 50-70 year old female who, sadly, was born about 50 years too late to be tech
savvy. A few year ago her Grandson Stefon bought her a macbook which she uses to browse Facebook and
read the news. Because Sally isn't not very tech savvy, she usually only finds new websites through
posts made by her Facebook friends.
</p>
</ul>
<!-Discription of use scenario for Grandma Sally.->
<h2>Use Scenario</h2>
<ul>
<li>After an afternoon of watching Judge Judy stick it to some freeloaders, Sally decided to open up her
laptop and browse Facebook. After several minutes of liking pictures of her neighbor's grandson, she
noticed a headline demonizing Bernie Sanders for attempting to unionize debate moderators.
Upon further investigation Sally realizes the post was made by her grandson Stefon. If there's one thing
Grandma Sally knows her Grandson Stefon,it's that he is a dirty liberal commie who would never criticize
his savior, Bernie Sanders. Because of this new-found idiosyncrasy in Stefon,Grandma Sally is now
hell-bent on examining this so called Onion to find out what it did to her Grandson. In order to do
this, Grandma Sally must:
</li>
</ul>
<!-Table of steps taken by Grandma Sally and The Onion during completion of her use scenario->
<table>
<tr>
<th>Sally</th>
<th>The Onion</th>
</tr>
<td>
<ol>
<li>Sally excitedly clicks the link Stefon shared.</li>
<li>Sally reads the story about Bernie Sanders and decided she wants to read more political
stories.</li>
<li>After five minutes she finally finds the politics link on the left side of the screen and
clicks it.</li>
<li>Scroll through articles.</li>
<li>Click headline.</li>
<li>Read article.</li>
<li>Repeat steps 4-6 until Grandma Sally realizes she is truly reading America's Finest News
Source.</li>
</ol>
</td>
<td>
<ol>
<li>Facebook communicates with the Onion, and then opens a new browser window containing the
contents of the link in the story above.</li>
<li>The Onion delivers the website to Sally's browser.</li>
<li>The Onion opens www.theonion.com/section/politics.</li>
<li>The Onion displays varying stories above the background.</li>
<li>The Onion pulls up URL url linked to the headline.</li>
<li>The Onion chills.</li>
<li>The Onion repeats steps 4-6 until Sally finally finds realizes she is reading America's
Finest News Source.</li>
</ol>
</td>
</table>
<!-Funny image to conclude use case->
<h2>Sorry Sally</h2>
<img src="img/sorrysally.jpg" alt="Sorry Sally">
<!-Discussion of database interactions and terms during use scenarios->
<h2>Backend</h2>
<!- Description of conceptual model, and application to use scearios->
<h3>Conceptual Model</h3>
<p>A conceptual model is a basic map of concepts and relationships used in databases.</p>
<!-the two entities from the use scenario->
<h3>Articles and Tags</h3>
<p>The two entities are the Tag and the Article. Because Tags can be applied to many articles
and Articles can receive many tags both entities have a many-to-many relationship.
</p>
<table>
<tr>
<th>Entites and Relationship Types
</th>
</tr>
<td>
<ol>
<li>Tag, many-to-many</li>
<li>Article, many-to-many</li>
</ol>
</td>
</table>
<h3>Attributes</h3>
<h3>Article</h3>
<ul>
<li>articleId, primary key </li>
<li>articleDate, attribute</li>
<li>issueId, attribute</li>
<li>articleContent, attribute</li>
</ul>
<h3>Tag</h3>
<ul>
<li>articleId, foreign key </li>
<li>tagId, primary key</li>
<li>tagName, attribute</li>
</ul>
<!-Entity Relationship Diagram for The Onion Article->
<h3>Entity Relationship Diagram</h3>
<img src="img/onion-article-erd.svg" alt="Onion ERD">
</body>
</html>