-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathresources.html
343 lines (292 loc) · 16.6 KB
/
resources.html
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/css/main.css"/>
<script type="text/javascript" src="/js/raccoon.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>
</head>
<body>
<nav class="Wrapper NavWrapper">
<ul class="Body">
<li id="homeNav">
<a href="#intro">Home</a>
</li>
<li>
<a href="#rules">Labs</a>
</li>
<li>
<a href="#resources">Events</a>
</li>
<li>
<a href="#sponsors">Members</a>
</li>
<li>
<a href="#sponsors">About</a>
</li>
<li>
<a href="#sponsors">Sponsors</a>
</li>
</ul>
</nav>
<div class="Wrapper HeaderWrapper">
<header class="Body">
<h1 id="logoTxt">HTML<br/><span>TORONTO</span></h1>
<img src="/img/logo.png"/>
<blockquote>
<img src="/img/left-quote.png" class="LeftQuote" />
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.<img src="/img/right-quote.png" class="RightQuote" />
</blockquote>
</header>
</div>
<div class="Wrapper BodyWrapper">
<div id="MainContent" class="Body">
<div class="clear"></div>
<div class="resources">
<h2>Glossary</h2>
<ul>
<li>
<h3 id="markup">Markup</h3>
<p>HTML is short for HyperText <em>Markup</em> Language. Markup is a way of annotating a document that informs how it will be displayed. <em>Semantic Markup</em> in particular informs how each part of the document is expected to be used and processed. For example, the <nav> <a href="#tag">tag</a> has semantic meaning in an HTML5 document, inferring that it is to be used to contain navigation <a href="#element">elements</a>.</p>
</li>
<li>
<h3 id="tag">Tag</h3>
<p>An HTML tag is a way of <a href="#markup">marking up</a> a HTML <a href="#element">element</a>. It begins with a < symbol and ends with a > symbol, and contains the element tag name, e.g. 'a' or 'li' or 'section'. E.g: <article>. Some tags wrap around content, such as text, and are closed with another similar tag that begins with </ e.g. </article>. These tags are converted into HTML elements when the browser builds a <a href="#dom">DOM</a> representation of your document.</p>
</li>
<li>
<h3 id="element">HTML Element</h3>
<p>A web page is made of a variety of 'elements', such as anchors ( used for linking to other documents, files and resources ), inputs ( used for entering information, e.g. checkboxes, text inputs and radio buttons ) scripts ( used for introducing <a href="#js">JavaScript</a> ), images, paragraphs, and so on. </p>
</li>
<li>
<h3 id="framework">Framework</h3>
<p>A framework is a collection of code intended on being used as a solid starting point to make large projects. It provides common, built-in and tested functionality. Web developers have frameworks they use on the front-end and the back-end. Examples of frameworks are Kohana, CodeIgniter, Microsoft .net, and Backbone.js</p>
</li>
<li>
<h3 id="js">JavaScript</h3>
<p>JavaScript is the programming language of the web browser. It allows developers to imbue web pages with behaviour and dynamic functionality, to make web pages act more like applications - responding to user input and manipulating the presentation of the page.</p>
</li>
<li>
<h3 id="css">CSS</h3>
<p>CSS stands for Cascading Style Sheets. A stylesheet is a document that allows a developer to write collections of styling 'rules' for the HTML <a href="#element">elements</a> on their web pages. When the browser reads a stylesheet it applies the styling rules to the elements. For example, a styling rule <em>section{border:1px solid red}</em> would apply a thin red border to each 'section' element.</p>
</li>
<li>
<h3 id="selectors">Selectors</h3>
<p>To access <a href="#element">elements</a> of a web page with <a href="#css">CSS</a> or <a href="#js">JavaScript</a>, you need to be able to 'select' the element you want to target. You can select an element with its <a href="#tag">tag</a> name, such as 'a' would target all the anchor elements. Elements can also be given classes (accessed with the syntax '.classname'), or unique ids accessed with the syntax '#id'. Selectors are added to HTML tags as attributes like so: <section class="row" id="interface">. </p>
</li>
<li>
<h3 id="js_lib">JavaScript Library</h3>
<p>A JavaScript library is a collection of prewritten <a href="#js">JavaScript</a> intended to ease the writing of web applications. for example, the library might provide a simplified syntax for producing functionality that might take a lot of code to write from scratch. The library may also be made to work the same way in a variety of browsers, taking the burden of cross browser javascript off the developer.</p>
</li>
<li>
<h3 id="ajax">AJAX</h3>
<p>AJAX stands for Asynchronous <a href="#js">JavaScript</a> and XML. It is a catch-all term for loading content into a webpage and for transmitting content from a page back to a <a href="#web_server">server</a> without reloading the page. Even though the X in AJAX stands for XML, it has become popular to use the JSON format to tramsmit data, and it is also possible to transmit HTML.</p>
</li>
<li>
<h3 name="web_server">Web Server</h3>
<p>A 'web server' is a computer running software used for producing web pages over the internet. A common collection of software would be a Linux operating system, the Apache HTTP server, The PHP / Python / Perl languages and a mySQL database, commonly called a LAMP stack.</p>
</li>
<li>
<h3>Back-end and front-end</h3>
<p>The back-end of a website refers to the code that runs on a server, being the database and scripting language used to produce the pages, as well as the HTTP server and how it is set up. The front-end of a website groups the part of a website that users see and interact with, and includes the HTML, CSS, JavaScript, Flash, images and design work used to produce it.</p>
</li>
<li>
<h3 id="dom">Document Object Modal (DOM)</h3>
<p>The Document Object Modal is a convention for describing and manipulating the <a href="#element">elements</a> of a HTML document. When a browser reads an HTML document, it creates a '<a href="#dom">DOM</a>', which is visually represented onscreen, and the elements of which can be accessed with CSS and JavaScript. A <ul> tag in the HTML document will be represented as a 'node' in the DOM with various properties, which can be set and changed with CSS and JavaScript.</p>
</li>
<li>
<h3 id="api">API</h3>
<p>API stands for Application Programming Interface. An API exposes a set of utilities that a developer can use to make different software components work with each other. For example, a developer can have their website use the Twitter API to search twitter and retrieve tweets to display on their page, or use the Google Maps API to make and manipulate a google map for their website.</p>
</li>
<!--
Version control
Code repository
Interpreted language vs Compiled Language
Abstraction
Plugins
CSS Resets
MVC
Document Outlining Algorithm
Selectors
Rendering engines
Web Standards
-->
</ul>
<h2>Tools</h2>
<ul>
<li>
<h3 id="html5_boilerplate">HTML5 Boilerplate</h3>
<a href="http://html5boilerplate.com/">Website</a>
<p>This is a starting point for making HTML5 websites. The creators and maintainers of the boilerplate build in a number of best practices and quality tools: semantic markup, performance optimisations and cross browser compatibility.</p>
</li>
<li>
<h3 id="modernizr">Modernizr</h3>
<a href="http://www.modernizr.com/">Website</a>
<p>Modernizr is a JavaScript plugin that helps you tailor the website to appropriately handle the different features a browser might have. It can be used to detect features and load scripts / stylesheets depending on whether the feature is available or not. For example, you may have Javascript for a touch interface that does not need to be loaded for a browser on a device without a touch screen.</p>
</li>
<li>
<h3 id="selectivizr">Selectivizr</h3>
<a href="http://selectivizr.com/">Website</a>
<p>Selectivizr is a JavaScript plugin that allow you to use CSS3 <a href="#selector">selectors</a> ( such as 'nth-child' ) in Internet Explorer 6-8, which do not natively support these selectors.</p>
</li>
<li>
<h3 id="jquery">jQuery</h3>
<a href="http://jquery.com/">Website</a>
<p>jQuery is a very popular Javascript library. jQuery gives the developer a very simple syntax for selecting, traversing and manipulating elements of the page, and has a rich set of plugins for slideshows, form validation, and many other purposes.</p>
</li>
<li>
<h3>HTML5Shiv</h3>
<a href="http://remysharp.com/2009/01/07/html5-enabling-script/">About</a>
<p>Internet Explorer versions below 9 do not recognise the new <a href="#element">element</a>s introduced with HTML5, such as <section> & <article>, which means they cannot be <a href="#selectors">selected</a> by <a href="#js">JavaScript</a> and <a href="#css">CSS</a>. This script teaches Internet Explorer to recognise the new elements. Be aware that it will not make elements such as <canvas> re-aquire their functionality in IE, but you will be able to select them.</p>
</li>
<!--
Eric Meyers reset
-->
</ul>
<h2>Useful resources</h2>
<ul>
<li>
<h3>w3c Validator</h3>
<a href="http://validator.w3.org/">w3c Validator</a>
<p>The w3c is the organization that produces the specific standards for HTML, CSS and many other technologies used to generate the world wide web. Standards are important to developers, as making a website look and act the same way in standards compliant browsers is easier than doing so for browsers that not not meet the same standards. Part of checking that the HTML document is written to spec is by passing it through the w3c's validator. Ideally if a developer and a browser vendor meet specifications, then the document should come out as it is intended.</p>
</li>
<li>
<h3>Mozilla Developer Network</h3>
<a href="https://developer.mozilla.org/en-US/">Website</a>
<p>The MDN is an organisation of developers producing very high quality documentation about the various elements of HTML, rules of CSS and syntax of JavaScript.</p>
</li>
<li>
<h3>jQuery Docs</h3>
<a href="http://docs.jquery.com/Main_Page">Website</a>
<p>The official documentation for jQuery.</p>
</li>
<li>
<h3>Quirksmode</h3>
<a href="http://www.quirksmode.org/">Website</a>
<p>The website of Peter-Paul Koch, who maintains a very comprehensive set of tables detailing what features work in a large variety of browsers.</p>
</li>
<li>
<h3>Stack Overflow</h3>
<a href="http://stackoverflow.com">Website</a>
<p>Stack Overflow is a popular question and answer forum for developers to ask/answer questions about code, and to seek help when troubleshooting.</p>
</li>
<li>
<h3>PhoneGap doumentation</h3>
<a href="http://docs.phonegap.com/en/1.4.1/index.html"></a>
<p>The official documentation for the phonegap framework. PhoneGap permits HTML5 developers to wrap their code in native mobile wrappers, and provides a common API to access the device through JavaScript - for example, the camera and the </p>
</li>
<li>
<h3>HTML5Rocks</h3>
<a href="http://www.html5rocks.com/en/">Website</a>
<p>An HTML5 Advocacy site, a great repository of information from top HTML5 developers.</p>
</li>
<li>
<h3>apparat.io</h3>
<a href="http://apparat.io/">Website</a>
<p>A way to package an HTML5 app for BlackBerry, Android, iOS and Palm.</p>
</li>
<li>
<h3>BlackBerry Developer Portal</h3>
<a href="http://developer.blackberry.com/">Website</a>
<p>Official BlackBerry Developer Documentation. Look for the HTML5 WebWorks section for support in getting your HTML5 app onto a BlackBerry tablet or handset.</p>
</li>
<li>
<h3>Ripple</h3>
<a href="http://ripple.tinyhippos.com/">Website</a>
<p>Ripple is a mobile environment simulator that runs in a web browser and is one of the ways to test your HTML5 mobile app.</p>
</li>
<li>
<h3>abduzeedo</h3>
<a href="http://abduzeedo.com/">Website</a>
<p>Abduzeedo is a resource for designers, with tutorials, inspiration, wallpapers, interviews and more.</p>
</li>
<li>
<h3>NetTuts</h3>
<a href="http://net.tutsplus.com/">Website</a>
<p>A fantastic resource for quality tutorials and news about all aspects of web development.</p>
</li>
<li>
<h3>SitePoint</h3>
<a href="http://www.sitepoint.com/">Website</a>
<p>Another high quality resource for web development news, tips and tutorials.</p>
</li>
</ul>
</div>
</div>
<div class="Wrapper FooterWrapper">
<footer class="Body">
<section>
<h3>Navigation</h3>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Labs</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Members</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Sponsors</a>
</li>
</ul>
</section>
<section>
<h3>Labs</h3>
<ul>
<li>
<a href="http://www.devto.ca/">Learning</a>
</li>
<li>
<a href="http://androidto.com/">Resources</a>
</li>
</ul>
</section>
<section>
<h3>About</h3>
<ul>
<li>
<a href="http://www.devto.ca/">Contact</a>
</li>
<li>
<a href="http://androidto.com/">Contributors</a>
</li>
</ul>
</section>
<section>
<h3>Partner Groups</h3>
<ul>
<li>
<a href="http://www.theofficepub.ca/">AndroidTO</a>
</li>
<li>
<a href="http://www.kendoui.com/">DevTO</a>
</li>
<li>
<a href="http://www.kendoui.com/">FlashinTO</a>
</li>
<li>
<a href="http://www.kendoui.com/">FITC</a>
</li>
<li>
<a href="http://www.kendoui.com/">GUTG</a>
</li>
</ul>
</section>
<div class="sponsors">
<p>sponsor</p>
</div>
<div class="sponsors" style="margin-top: 10px;">
<p>Sponsor</p>
</div>
</footer>
</div>
</body>
</html>