forked from mozilla/learning.mozilla.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-literacy.jsx
186 lines (181 loc) · 9.57 KB
/
web-literacy.jsx
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
var React = require('react');
var Illustration = require('../components/illustration.jsx');
var IconLinks = require('../components/icon-links.jsx');
var IconLink = require('../components/icon-link.jsx');
var Expander = require('../components/expander.jsx');
var WebMaps = React.createClass({
render: function() {
return (
<div className="row web-maps">{this.props.children}</div>
);
}
});
var WebMap = React.createClass({
render: function() {
return (
<div className="web-map col-sm-4 col-md-4 col-lg-4">
<h2>{this.props.head}</h2>
<span>{this.props.subhead}</span>
<div className="web-map-contents">
{this.props.children}
</div>
</div>
);
}
});
var ActivitiesPage = React.createClass({
statics: {
pageClassName: "web-literacy"
},
render: function() {
return (
<div className="inner-container">
<h1>Web Literacy</h1>
<section className="intro">
<Illustration
width={210} height={210}
src1x="/img/web-literacy-page/icon-web-literacy.svg"
alt="web literacy illustration">
<h2>
Web Literacy is the skills and competencies needed for reading, writing, and participating on the Web.
</h2>
</Illustration>
</section>
<section>
<WebMaps>
<WebMap head="Explore" subhead="Reading the Web">
<Expander head="navigation">
<p>Accessing the web using the common features of a browser</p>
<p>Using hyperlinks to access a range of resourves on the web.</p>
<p>Reading, evaluating, and manipulating URLs.</p>
<p>Recognizing the common visual cues in the services.</p>
<p>Exploring browser add-ons and extensions to provice additional functionality.</p>
</Expander>
<Expander head="web mechanics">
<p>Using and understanding the differences between URLs, IP addresses and search terms.</p>
<p>Identifying where data is in the network of devices that makes up the Internet.</p>
<p>Exporting, moving, and backing up data from web services.</p>
<p>Explaining the role algorithms play in creating and managing content on the web.</p>
<p>Creating or modifying an algorithm to serve content from around the web.</p>
</Expander>
<Expander head="search">
<p>Developing questions to aid a search.</p>
<p>Using and revising keywords to make web searches more efficient.</p>
<p>Evaluating search results to determine if the information is relevant.</p>
<p>Finding real-time or time-sensitive information using a range of search techniques.</p>
<p>Discovering information and resources by asking people within social networks.</p>
</Expander>
<Expander head="credibility">
<p>Comparing and contrasting information from a number of sources.</p>
<p>Making judgments based on technical and design characteristics.</p>
<p>Discriminating between ‘original’ and derivative web content.</p>
<p>Identifying and investigating the author or publisher of web resources.</p>
<p>Evaluating how purpose and perspectives shape web resources.</p>
</Expander>
<Expander head="security">
<p>Recommending how to avoid online scams and 'phishing’.</p>
<p>Managing and maintaining account security.</p>
<p>Encrypting data and communications using software and add-ons.</p>
<p>Changing the default behavior of websites, add-ons and extensions to make web browsing more secure.</p>
</Expander>
</WebMap>
<WebMap head="Build" subhead="Writing the Web">
<Expander head="composing">
<p>Inserting hyperlinks into a web page.</p>
<p>Identifying and using HTML tags.</p>
<p>Embedding multimedia content into a web page.</p>
<p>Creating web resources in ways appropriate to the medium/genre.</p>
<p>Setting up and controlling a space to publish on the Web.</p>
</Expander>
<Expander head="remixing">
<p>Identifying remixable content.</p>
<p>Combining multimedia resources to create something new on the web.</p>
<p>Shifting context and meaning by creating derivative content.</p>
<p>Citing and referencing original content.</p>
</Expander>
<Expander head="designing">
<p>Using CSS properties to change the style and layout of a Web page.</p>
<p>Demonstrating the difference between inline, embedded and external CSS.</p>
<p>Improving user experiences through feedback and iteration.</p>
<p>Creating device-agnostic web resources.</p>
</Expander>
<Expander head="coding/scripting">
<p>Reading and explaining the structure of code.</p>
<p>Identifying and applying common coding patterns and concepts.</p>
<p>Adding comments to code for clarification and attribution.</p>
<p>Applying a script framework.</p>
<p>Querying a web service using an API.</p>
</Expander>
<Expander head="accessibility">
<p>Using empathy and awareness to inform the design of web content that is accessible to all users.</p>
<p>Designing for different cultures which may have different interpretations of design elements.</p>
<p>Comparing and exploring how different interfaces impact diverse users.</p>
<p>Improving the accessibility of a web page through the design of its color scheme, structure/hierarchy and markup.</p>
<p>Comparing and contrasting how different interfaces impact diverse web users.</p>
</Expander>
</WebMap>
<WebMap head="Connect" subhead="Participating on the Web">
<Expander head="sharing">
<p>Creating and using a system to distribute web resources to others.</p>
<p>Contributing and finding content for the benefit of others.</p>
<p>Creating, curating, and circulating web resources to elicit peer feedback.</p>
<p>Understanding the needs of audiences in order to make relevant contributions to a community.</p>
<p>Identifying when it is safe to contribute content in a variety of situations on the web.</p>
</Expander>
<Expander head="collaborating">
<p>Choosing a Web tool to use for a particular contribution/ collaboration.</p>
<p>Co-creating Web resources.</p>
<p>Configuring notifications to keep up-to-date with community spaces and interactions.</p>
<p>Working towards a shared goal using synchronous and asynchronous tools.</p>
<p>Developing and communicating a set of shared expectations and outcomes.</p>
</Expander>
<Expander head="participation">
<p>Engaging in web communities at varying levels of activity.</p>
<p>Respecting community norms when expressing opinions in web discussions.</p>
<p>Making sense of different terminology used within online communities.</p>
<p>Participating in both synchronous and asynchronous discussions.</p>
</Expander>
<Expander head="privacy">
<p>Debating privacy as a value and right in a networked world.</p>
<p>Explaining ways in which unsolicited third parties can track users across the web.</p>
<p>Controlling (meta)data shared with online services.</p>
<p>Identifying rights retained and removed through user agreements.</p>
<p>Managing and shaping online identities.</p>
</Expander>
<Expander head="open practices">
<p>Distinguishing between open and closed licensing.</p>
<p>Making web resources available under an open license.</p>
<p>Contributing to an Open Source project.</p>
<p>Advocating for an open web.</p>
</Expander>
</WebMap>
</WebMaps>
<IconLinks>
<IconLink
href="https://wiki.mozilla.org/Webmaker/WebLiteracyMap"
imgSrc="/img/web-literacy-page/icon-contribute.svg"
imgAlt="icon contribute"
head="Contribute"
subhead="Join the community on defining Web Literacy at Mozilla"
/>
<IconLink
href="https://mozilla.github.io/webmaker-whitepaper/"
imgSrc="/img/web-literacy-page/icon-learn-more.svg"
imgAlt="icon learn more"
head="Learn More"
subhead="This whitepaper explores why Mozilla cares about Web Literacy"
/>
<IconLink
href="https://www.mozilla.org/en-US/about/manifesto/"
imgSrc="/img/web-literacy-page/icon-mozilla.svg"
imgAlt="icon mozilla"
head="Get Reading"
subhead="Web Literacy is core to the Mozilla mission and values"
/>
</IconLinks>
</section>
</div>
);
}
});
module.exports = ActivitiesPage;