javascriptu.github.com/index.html at master · javascriptu/javascriptu.github.com · GitHub

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>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en" itemscope itemtype="http://schema.org/">
<!--<![endif]-->
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Javascript University</title>
  <meta name="description" content="Learn modern web development with JavaScript University in San Diego">

  <meta name="viewport" content="width=device-width">

  <!-- OpenGraph/Facebook -->
  <meta property="og:title" content="JavaScript University" />
  <meta property="og:type" content="non_profit" />
  <meta property="og:url" content="http://www.javascriptu.org/" />
  <meta property="og:image" content="http://www.javascriptu.org/apple-touch-icon.png" />
  <meta property="og:description" content="Learn modern web development with JavaScript University in San Diego" />
  <meta property="og:site_name" content="JavaScriptU" />
  <meta property="fb:admins" content="798269243" />

  <!-- G+ -->
  <meta itemprop="name" content="JavaScript University">
  <meta itemprop="description" content="Learn modern web development with JavaScript University in San Diego">
  <meta itemprop="image" content="http://javascriptu.org/apple-touch-icon.png">

  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
  <!--
  <link rel="stylesheet/less" href="css/styles.less">
  <script src="js/less-1.3.0.min.js"></script>
  -->
  <link rel="stylesheet" href="css/main.css">
  <!--[if gte IE 9]><style type="text/css">.gradient {filter : none;}</style><![endif]-->
</head>
<body>
<!--[if lt IE 9]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<header id="header">
  <div class="container">
    <div class="row"><h2 id="ribbon" class="span5"><a href="http://sandiegojs.org/"><img src="img/sandiegojs-logo.png" alt="SanDiegoJS presents"></a></h2></div>

    <!-- <div class="row"><h1 id="title" class="brand span9 offset2">JavaScript<u>U</u></h1></div> -->
    <div class="row"><h1 id="title" class="brand span12"><img src="img/JSULogo.png"></h1></div>

    <!--<div class="row"><h2 id="subtitle" class="span8 offset4">A series of web workshops</h2></div>-->
    <div class="row">
      <div class="span12" id="social-buttons" style="height:25px;text-align: right;display:none;margin-top:10px;">
          <div class="g-plusone" data-size="medium" data-href="http://javascriptu.org/"></div>
          <div class="fb-like" style="vertical-align: top" data-href="http://javascriptu.org/" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
          <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.javascriptu.org/" data-text="Check out JavaScriptU in San Diego" data-via="javascriptu">Tweet</a>
      </div>
    </div>

  </div>

</header>

<section id="content" class="container" data-spy="content">
  <img src="img/jsuheader.jpg" width="960" height="300" alt="JSU-IMG">

  <div class="row tout">
    <div class="span10 offset1">
      <h1> What is <span class="brand">JavaScript<u>U</u></span>?</h1>

      <p class="span9">
        6 <em>free</em>, interactive, in-person workshops dedicated to the most important language of the decade,
        <strong>JavaScript</strong>.
      </p>
    </div>
  </div>

  <div class="row">
    <div id="missionStatement" class="span12 gradient">
      <h3 id="statement" class="span10 offset1">
        Our mission is to promote forward thinking web development<br>and the free sharing of knowledge.
      </h3>
    </div>
  </div>

  <div class="row tout">
    <div class="span10 offset1">
      <h1>You're invited to learn with us.</h1>

      <p class="span9">
        From the basics to the advanced, from jQuery to backbone, from the DOM to <em>whatever you choose.</em>
      </p>

      <p class="span9">
        Anything is fair game and you call the shots. The course topics alter based on the votes of the attendees.
        You
        literally learn what you come here to learn.
      </p>

    </div>
  </div>


  <div class="row tout">
    <div class="span10 offset1">
      <h2>Learn how to set up a solid foundation</h2>
      <p class="span9">
        Use modern JavaScript libraries to give yourself a running head start. Technologies like
        <a href="http://requirejs.org/">requirejs</a>,
        <a href="http://pivotal.github.com/jasmine/">Jasmine</a>,
        <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>,
        <a href="http://jquery.com">jQuery</a>,
        Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>, and more!
      </p>
      <ul class="span10 offset1" id="sampleTech">
      </ul>
    </div>
  </div>

  <div class="row tout">
    <div class="span10 offset1">
      <h2>Past Workshops</h2>
      <ol class="span9">
        <li>
          <h3>
            Setting up our foundation
            <small>
              <a href="http://www.javascriptu.org/decks/sd/building_the_foundation/">Slides</a> -
              <a href="http://www.youtube.com/watch?v=CQAq7lYghlY">Video</a>
            </small>
          </h3>
        </li>
        <li>
          <h3>
            Advanced jQuery
            <small>
              <a href="">Slides</a> - Coming soon
              <a href="">Video</a> - Coming soon
            </small>
          </h3>
        </li>
      </ol>
    </div>
  </div>

  <div id="tout-javascript" class="row tout">
    <div id="javascript-front" class="span12">
      <button id="expose-playground" class="btn-large btn-info">Want a taste?</button>
      <button id="execute-playground" class="btn-large btn-success" style="display:none">Run this code</button>
    </div>
  </div>

  <div id="playground-container" class="row">
    <textarea id="javascript-playground" class="span12">
$('#you-can-code').slideDown();
    </textarea>
  </div>

  <div id="you-can-code" class="row tout" style="display:none;">
    <div class="span8 alert alert-success">
      <h1>Congratulations!</h1>
      <p>That wasn't that hard was it? Try changing the above to</p>
      <code>$('p').toggleClass('rotate');</code>
    </div>
  </div>

  <div class="row tout">
    <div class="span10 offset1">
      <h1>Why? <small>Why not?</small></h1>
      <p class="span9" id="tout-why">
        <img src="img/heart-js.png" width="30" height="30" alt="heart-js">
        We love JavaScript, the web, and San Diego. We're just a bunch of developers trying to give back and share
        some of the tips we've discovered over the past decade in web development.
      </p>
    </div>
  </div>
  <div class="row">
    <div id="info-panes-container" class="span12 gradient">
      <div id="info-panes" class="row">
        <div id="info-pane-where" class="info-pane span3 offset1">
          <h3 class="info-header">WHERE?</h3>
          <a href="http://maps.google.com/maps?q=10185+mckellar+ct,+92121&ll=32.902164,-117.199638&spn=0.015944,0.033023&hnear=10185+McKellar+Ct,+San+Diego,+California+92121&gl=us&t=m&z=16">
            <address>
            <span class="company">Qualcomm</span>
            <span class="street">10185 McKellar Ct</span>
            <span class="city">San Diego</span>
            <span class="state">California</span>
            <span class="zip">92121</span>
          </address>
          </a>
        </div>
        <div id="info-pane-when" class="info-pane span3">
          <h3 class="info-header">WHEN?</h3>
          <p>
            April.May.June
            <br>
            2<sup>nd</sup> & 4<sup>th</sup> Tuesdays
            <br>
            <span id="times">7:00pm - 9:00pm</span>
          </p>
          <ul>
            <li class="past-dates" style="text-decoration:line-through">apr.10 & apr.24</li>
            <li>may.8 & may.22</li>
            <li>jun.12 & jun.26</li>
          </ul>
        </div>
        <div id="info-pane-register" class="info-pane span3">
          <h3 class="info-header">REGISTER.</h3>
          <h4>Next Workshop</h4>
          <p>5.8.2012</p>
          <a href="http://www.eventbrite.com/event/3392881199" class="btn btn-large btn-primary">Register Now!</a>
        </div>
      </div>
    </div>
  </div>
  <div id="tout-who" class="row tout">
    <div class="span10 offset1">
      <h1>Who are we? <small>"awesome!"</small></h1>
      <ul>
        <li>
          <a href="http://jarrodoverson.com/"><img class="avatar" src="http://www.gravatar.com/avatar/74be2e435d69a5827de7b5d33e7b343d"> - Jarrod Overson</a>
          <a href="https://plus.google.com/108269395644621881233/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/jsoverson" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <a href="http://jesscarlos.com/"><img class="avatar" src="http://www.gravatar.com/avatar/469539a23b9381fe025a87c7507e7847"> - Jess Carlos</a>
          <a href="https://plus.google.com/u/0/113064773311025575909/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/jesscarlos" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <a href="http://johncozen.com/"><img class="avatar" src="http://www.gravatar.com/avatar/cc7dc3aa0a1058b3ffb4d2e9c9881ace"> - John Cozen</a>
          <a href="https://plus.google.com/u/0/108967406460169303684/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/jcozen" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <a href="http://www.keeyajones.com/"><img class="avatar" src="http://www.gravatar.com/avatar/8f6fedecc970558e21b42fe355a0e845"> - Keeya Jones</a>
          <a href="https://twitter.com/KeeyaJones" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <img class="avatar" src="http://www.gravatar.com/avatar/d13165f26de708630a7ac42e4be05cf0"> - Chris Miller
          <a href="https://plus.google.com/u/0/108975120791815625181/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/chrismiller84" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <img class="avatar" src="http://www.gravatar.com/avatar/6481aa432a312ac5861d9dec7833a0c1"> - Eric Hall
          <a href="https://plus.google.com/116456078968848975032/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/eric2701" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <img class="avatar" src="http://www.gravatar.com/avatar/98833108b7dc2ecbb69de954772053bf"> - Rafael Cardoso
          <a href="https://plus.google.com/u/0/112454718147707186033/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/rafamvc" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <a href="http://mokolabs.com/"><img class="avatar" src="http://www.gravatar.com/avatar/6e2dbee8af46ad50428dc106b9a10096"> - Patrick Crowley</a>
          <a href="https://plus.google.com/u/0/104277149198791729376/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/mokolabs" class="twitter"><img src="img/twitter.png"></a>
        </li>
        <li>
          <img class="avatar" src="http://www.gravatar.com/avatar/fe9c3b07bb3af5354847749812a955b1"> - Kevin Ball
          <a href="https://plus.google.com/u/0/118305109722095308753/posts" class="gplus"><img src="img/gplus.png"></a>
          <a href="https://twitter.com/kbal11" class="twitter"><img src="img/twitter.png"></a>
        </li>
      </ul>
    </div>
  </div>
  <br>
  <div class="row tout">
    <div class="span10 offset1">
      <h3>Love web development as much as we do?</h3>
      <p class="span9">
        Contact us <a href="mailto:contact@javascriptu.org">here</a> and let us know if you want to know how you can help spread JavaScript in your city!
      </p>
      <p class="span9">
        We will be open sourcing all the pieces of our workshops, the curriculum, materials, slides, and certainly the code.
        Once the first session is over you will be able to fork an entire workshop, tailor it to your needs, advertise
        your series on javascriptu.org, and dramatically reduce the amount of effort you need to get something up and running.
      </p>
    </div>
  </div>
</section>

<footer>
  <div class="container">
    <div class="span12">
      <p>Design by <a href="http://keeyajones.com/">Keeya Jones</a></p>
    </div>
  </div>
</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/codemirror.min.js"></script>
<link rel="stylesheet" href="css/codemirror.css">
<script src="js/script.js"></script>
<!-- G+ +1 -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Facebook like -->
<div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Twitter follow button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- Google Analytics -->
<script>
  var _gaq = [
    ['_setAccount', 'UA-30345299-1'],
    ['_trackPageview']
  ];
  (function (d, t) {
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s)
  }(document, 'script'));
</script>
</body>
</html>