slides.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1024">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>SITCON x NCHUIT 台中定期聚 #12 暨 NCHUIT 期末成果發表 | by 中興資訊社 NCHUIT</title>

    <meta name="generator" content="Slide Show (S9)">
    <meta name="author" content="中興資訊社 NCHUIT">

    <link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
    <style>
        h1,h2,h3,h4,h5,h6{
            text-align: center;
        }

        /*loading style, title and author*/
        div#loading{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            transition: opacity 1s;

            background: rgb(21, 21, 21);
        }
        div#loading h1{
            margin: 0;
            padding-top: 80px;
            padding-bottom: 20px;

            background: rgb(53, 53, 53);
            border-bottom: #8ADFFF solid 3px;
            color: rgb(152, 255, 189);
        }
        div#loading h3{
            margin: 0;
            padding-top: 20px;
            padding-bottom: 20px;

            background: rgb(72, 84, 66);
            color: rgba(255, 179, 94, 1);
        }
        div#loading.done{
            opacity:0;
        }

        div#loading .spinner {
            -webkit-animation: rotation 1.4s linear infinite;
            animation: rotation 1.4s linear infinite;
            stroke: rgba(0, 149, 207, 1);
            margin-left: auto;
            display: block;
            margin-right: auto;
            margin-top: 10%;
        }
        @-webkit-keyframes rotation {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
            }
        }
        @keyframes rotation {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
            }
        }
        div#loading .spinner .circle {
            stroke-dasharray: 187;
            stroke-dashoffset: 0;
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            -webkit-animation: turn 1.4s ease-in-out infinite;
            animation: turn 1.4s ease-in-out infinite;
        }
        @-webkit-keyframes turn {
            0% {
                stroke-dashoffset: 187;
            }
            50% {
                stroke-dashoffset: 46.75;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
            }
            100% {
                stroke-dashoffset: 187;
                -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
            }
        }
        @keyframes turn {
            0% {
                stroke-dashoffset: 187;
            }
            50% {
                stroke-dashoffset: 46.75;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
            }
            100% {
                stroke-dashoffset: 187;
                -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
            }
        }

        /*the background*/
        body {
            background: #545454; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover,  #545454 0%, #262626 100%); /* FF3.6+ */
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#545454), color-stop(100%,#262626)); /* Chrome,Safari4+ */
            background: -webkit-radial-gradient(center, ellipse cover,  #545454 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
            background: -o-radial-gradient(center, ellipse cover,  #545454 0%,#262626 100%); /* Opera 12+ */
            background: -ms-radial-gradient(center, ellipse cover,  #545454 0%,#262626 100%); /* IE10+ */
            background: radial-gradient(ellipse at center,  #545454 0%,#262626 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#262626',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


            font-family: 'Montserrat', sans-serif;
        }

        /*normal step*/
        .step {
          color:rgb(152, 255, 189);
          width: 1024px;
          height: 576px;
          padding: 40px 60px;

          font-size: 32px;

          opacity: 0.9;
          line-height: 1.6;

          transition: all 0.5s ease 0s;
        }

        .step.future {
          opacity: 0;
          pointer-events:none;
        }

        .step.active {
          opacity: 1;
          text-shadow: 0px 0px 20px black;
        }

        .step.present {
            z-index: 100;
        }

        /*markdown elements*/
        h2{
            margin-top: 20%;
            margin-bottom: 10px;
        }

        h4{
            margin-top: 0;
            margin-bottom: 10px;
        }

        p {
            margin: 0;
        }

        pre {
            background-color: rgba(56, 186, 112, 1);
            padding: 15px;
            overflow: auto;
        }

        code {
            background-color: rgba(56, 186, 112, 0.82);
            color: #D1CABC;
            border-radius: 10px;
            padding: 7px;
            font-family: "Consolas","Montserrat",sans-serif;
        }

        blockquote {
            margin: 0px;
            padding-left: 40px;
            border-left: 10px solid #000;
            color: rgba(105, 105, 105, 1)
        }

        blockquote blockquote{
            border: none;
        }

        blockquote p{
            margin: 0;
        }

        img {
            max-width: 100%;
        }

        ul {
            padding-left: 1.75em;
            margin: 0px 0px 20px;
        }

        a {
            color: rgba(0, 149, 207, 1);
        }

        strong {
            color: rgba(255, 179, 94, 1);
        }

        /*controls*/

        .controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }

        .arrow {
            width: 0px;
            height: 0px;
            border: 30px solid rgba(153, 186, 213, 0.5);
            float: left;
            margin-right: 30px;
            -moz-user-select: none;
        }

        .prev {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-left-width: 0px;
            border-right-width: 50px;
        }

        .prev:hover {
            border-right-color: rgba(194, 217, 225, 1);
            cursor: pointer;
        }

        .next {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
            border-left-width: 50px;
            border-right-width: 0px;
        }

        .next:hover{
            border-left-color: rgba(194, 217, 225, 1);
            cursor: pointer;
        }

        /* customization options of steps*/

        .slide {
            background: #383838;
            border: black solid 1px;
            border-radius: 10px;
            overflow: auto;
        }
        .slide.active {
            box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px;
        }

        .step.unclickable {
            pointer-events:none;
        }

        .step.center p {
            text-align: center;
        }

        .step.showOnlyWhenPresent {
            opacity: 0;
            pointer-events:none;
        }

        .step.showOnlyWhenPresent.present {
            opacity: 1;
            pointer-events:default;
        }

        .step.picture img{
            max-height: 400px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        .step.slogen h2{
            margin-top: 15%;
            font-size: 1.9em;
        }

        
    </style>
</head>

<body class="impress-not-supported">

<div id="impress">

    <!-- note: assumes no header (breaking slides w/ SLIDE directive) -->

    <div class='step ' data-x='-20000' data-y='-20000' >
      <!-- === begin markdown block ===

      generated by markdown/1.2.0 on Ruby 2.2.4 (2015-12-16) [x86_64-linux]
                on 2015-12-26 10:07:12 +0000 with Markdown engine kramdown (1.9.0)
                  using options {}
  -->

<!-- _S9SLIDE_  x=-20000 y=-20000 -->

<h3 id="sitcon-x-nchuit--12">SITCON x NCHUIT 台中定期聚 #12</h3>

<h5 id="nchuit-">暨 NCHUIT 期末成果發表</h5>

<p><img src="http://i.imgur.com/3FpJbep.png" alt="NCHUIT" /></p>


    </div>

    <div class='step ' data-x='-20000' data-y='-19300' >
      <!-- _S9SLIDE_  x=-20000 y=-19300 -->

<h2 id="section">關於今天的定期聚</h2>

<h4 id="xdd">我們要來趁機成發一下，時間借我們一下吧XDD</h4>


    </div>

    <div class='step ' data-x='-18800' data-y='-20000' >
      <!-- _S9SLIDE_  x=-18800 y=-20000 -->

<h2 id="section-1">首先，從迎新開始</h2>


    </div>

    <div class='step ' data-x='-18800' data-y='-19300' >
      <!-- _S9SLIDE_  x=-18800 y=-19300 -->

<h2 id="section-2">我們做了個首頁</h2>

<h4 id="nchuitcchttpnchuitcc"><a href="http://nchuit.cc">nchuit.cc</a></h4>


    </div>

    <div class='step ' data-x='-18800' data-y='-18950' data-z='-350' data-rotate-x='90' >
      <!-- _S9SLIDE_  x=-18800 y=-18950 z=-350 rotate-x=90 -->

<h2 id="section-3">我們做了一些遊戲來吸引眼球</h2>

<h4 id="httpnchuitccindex"><a href="http://nchuit.cc/#index">首頁上的遊戲</a></h4>

<h4 id="clickclickhttpnchuitccclickclick"><a href="http://nchuit.cc/clickclick/">ClickClick</a></h4>

<h4 id="blackjackhttpsgithubcomnchuitblackjack-ws"><a href="https://github.com/NCHUIT/blackjack-ws">多人 BlackJack</a></h4>


    </div>

    <div class='step ' data-x='-18800' data-y='-18250' data-rotate-x='180' >
      <!-- _S9SLIDE_  x=-18800 y=-18250 rotate-x=180 -->

<h2 id="and-hackablehttpsgithubcomnchuittalktalk"><a href="https://github.com/NCHUIT/talktalk">完全匿名聊天室 (And Hackable)</a></h2>

<h4 id="section-4">但是完全匿名真的太歡樂了…</h4>


    </div>

    <div class='step picture' data-x='-18800' data-y='-18250' data-z='-1400' >
      <!-- _S9SLIDE_  picture x=-18800 y=-18250 z=-1400 -->

<h3 id="section-5">社團博覽會，結果…</h3>

<p><img src="http://i.imgur.com/k6xUGCT.jpg" alt="festival" /></p>


    </div>

    <div class='step ' data-x='-17400' data-y='-20000' >
      <!-- _S9SLIDE_  x=-17400 y=-20000 -->

<h2 id="section-6">依序展示本學期的活動之前，有件事得先弄</h2>

<h3 id="section-7">社團課程期末作業</h3>


    </div>

    <div class='step picture' data-x='-17400' data-y='-19300' >
      <!-- _S9SLIDE_  picture x=-17400 y=-19300 -->

<h3 id="section-8">規則</h3>

<p>瀏覽一下<a href="http://juncareasy.com/serker/">社課同學清單</a>，接著在票上寫上你最喜歡的作品作者的名字</p>

<p><img src="http://i.imgur.com/VwafBYK.png?1" alt="howto" /></p>

<blockquote>
  <p>有沒有作者要展示的？沒的話我就來瀏覽一下囉</p>
</blockquote>


    </div>

    <div class='step ' data-x='-16000' data-y='-20000' >
      <!-- _S9SLIDE_  x=-16000 y=-20000 -->

<h2 id="section-9">正式來吧，社課</h2>


    </div>

    <div class='step picture' data-x='-16000' data-y='-20000' data-z='350' data-rotate-x='90' >
      <!-- _S9SLIDE_  picture x=-16000 y=-20000 z=350 rotate-x=90 -->

<h3 id="html--bootstrap">第一主題：HTML &amp; Bootstrap</h3>

<ul>
  <li><a href="https://github.com/NCHUIT/104A_HTML">教材 Repo</a></li>
  <li><a href="http://static.pastleo.me/nchuit/104A_HTML/20150924_1_slides.html">HTML 投影片</a>、<a href="http://static.pastleo.me/nchuit/104A_HTML/社課.pdf">Bootstrap 投影片</a></li>
  <li><a href="http://static.pastleo.me/nchuit/104A_HTML/demo/personal_website.html">成品示範</a></li>
</ul>

<p><img src="http://static.pastleo.me/nchuit/104A_HTML/img/doge.gif" alt="doge" /></p>


    </div>

    <div class='step ' data-x='-16000' data-y='-17500' data-z='350' data-rotate-x='90' >
      <!-- _S9SLIDE_  x=-16000 y=-17500 z=350 rotate-x=90 -->

<h3 id="javascript--jquery">第二主題：Javascript &amp; jQuery</h3>

<ul>
  <li><a href="https://github.com/NCHUIT/104A_JS">教材 Repo</a></li>
  <li><a href="http://static.pastleo.me/nchuit/104A_JS/slide.html">JS 入門教學</a>、<a href="http://static.pastleo.me/nchuit/104A_JS/jquery">JQuery!</a></li>
  <li><a href="http://static.pastleo.me/nchuit/104A_JS/demo/boring_notes.html">成品示範</a></li>
</ul>

<blockquote>
  <p>其實純 JS 的部分是直接抄去年的啊…意思是說以後學弟妹都會用我們寫好的教學的是嗎…</p>
</blockquote>


    </div>

    <div class='step ' data-x='-16000' data-y='-15000' data-z='350' data-rotate-x='90' >
      <!-- _S9SLIDE_  x=-16000 y=-15000 z=350 rotate-x=90 -->

<h3 id="ajax-with-google-speadsheet">第三主題：Ajax with Google speadsheet</h3>

<ul>
  <li><a href="https://github.com/NCHUIT/104A-Ajax">教材 Repo</a></li>
  <li><a href="http://static-pl.nchuit.cc/104a-ajax/104A-Ajax.html">投影片</a></li>
  <li><a href="http://nyannyan.space/JT2htmlJS.html">成品示範</a></li>
</ul>

<blockquote>
  <p>簡單來說就是把 Google 試算表當成我們的 API 來練習 Ajax</p>
</blockquote>


    </div>

    <div class='step ' data-x='-16000' data-y='-12500' data-z='350' data-rotate-x='90' >
      <!-- _S9SLIDE_  x=-16000 y=-12500 z=350 rotate-x=90 -->

<h3 id="google-speadsheet-as-db-using-app-script">第四主題：Google speadsheet as DB using app script</h3>

<ul>
  <li><a href="https://goo.gl/3HkJKD">投影片</a></li>
  <li><a href="https://nchuit.hackpad.com/1210Ajax-teC1VRK0mqA">上課筆記</a></li>
  <li><a href="http://juncareasy.com/serker/template.html">大概要做這個，不過只是殼</a></li>
  <li><a href="http://juncareasy.com/serker/">社課小幫手</a> 大量了使用了這堂課所教導的內容</li>
</ul>

<blockquote>
  <p>既然已經可以寫後端程式…就把試算表當成資料庫來用吧XDD</p>
</blockquote>


    </div>

    <div class='step picture' data-x='-14600' data-y='-12500' >
      <!-- _S9SLIDE_  picture x=-14600 y=-12500 -->

<h2 id="section-10">我們的第二軌活動：程式競賽分享會</h2>

<p><img src="http://i.imgur.com/HUW3bWj.jpg" alt="acm" /></p>


    </div>

    <div class='step picture' data-x='-14600' data-y='-11800' >
      <!-- _S9SLIDE_  picture x=-14600 y=-11800 -->

<h3 id="section-11">活動狀況</h3>

<p><img src="http://i.imgur.com/3lvphbl.jpg" alt="acm_photo" /></p>

<h5 id="section-12">反正就是在電腦教室</h5>


    </div>

    <div class='step slide showOnlyWhenPresent' data-x='-14600' data-y='-11450' data-rotate-x='270' >
      <!-- _S9SLIDE_  slide showOnlyWhenPresent x=-14600 y=-11450 rotate-x=270 -->

<h3 id="section-13">看成績好了</h3>

<table>
  <thead>
    <tr>
      <th>隊名</th>
      <th>成員</th>
      <th>題數</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>投資理財有風險屁屁買賣沒保險</td>
      <td>劉冠閎 沈柏瑋 莊士賢</td>
      <td>3</td>
    </tr>
    <tr>
      <td>宇鈞均YEE隊</td>
      <td>王韋鈞 王鈞硯 林軒宇</td>
      <td>3</td>
    </tr>
    <tr>
      <td>sisker</td>
      <td>陳盈達 范浩翔 林師漢</td>
      <td>3</td>
    </tr>
    <tr>
      <td>室友好carry隊</td>
      <td>張軒譯</td>
      <td>3</td>
    </tr>
    <tr>
      <td>資工對不隊</td>
      <td>洪浩祐 李家駿 劉鴻文</td>
      <td>3</td>
    </tr>
    <tr>
      <td>程如code所說</td>
      <td>張泰瑋 黃翔宇 林佑儒</td>
      <td>3</td>
    </tr>
  </tbody>
</table>


    </div>

    <div class='step slide' data-x='0' data-y='0' data-scale='3' >
      <!-- _S9SLIDE_  slide x=0 y=0 scale=3 -->

<h2 id="section-14">接下來就是重頭戲了</h2>

<h4 id="section-15">開工計畫</h4>


    </div>

    <div class='step picture' data-x='0' data-y='0' data-z='-3500' data-scale='3' >
      <!-- _S9SLIDE_  picture x=0 y=0 z=-3500 scale=3 -->

<h3 id="section-16">真的不得不說，這個活動的特點就是…</h3>

<p><img src="https://i.imgur.com/ot3ivEJ.jpg" alt="eating" /></p>

<h4 id="section-17">我們總共吃了 10850 元 …</h4>


    </div>

    <div class='step ' data-x='5000' data-y='5000' data-scale='3' >
      <!-- _S9SLIDE_  x=5000 y=5000 scale=3 -->

<h2 id="section-18">來點正式的啦</h2>

<h4 id="section-19">我們的產出是啥～？</h4>


    </div>

    <div class='step ' data-x='5000' data-y='5000' data-z='-3500' data-scale='3' >
      <!-- _S9SLIDE_  x=5000 y=5000 z=-3500 scale=3 -->

<h2 id="section-20">空氣品質網站</h2>

<h4 id="httpairnchuitcc"><a href="http://air.nchuit.cc">網站在此</a></h4>

<h4 id="repo-httpsgithubcomjd615645air"><a href="https://github.com/jd615645/Air">Repo 位置</a></h4>


    </div>

    <div class='step ' data-x='5000' data-y='5000' data-z='-7000' data-scale='3' >
      <!-- _S9SLIDE_  x=5000 y=5000 z=-7000 scale=3 -->

<h2 id="nchues--">2016 NCHU.ES 清流盃 官方網站</h2>

<h4 id="httpnchues2016nchuitcc"><a href="http://nchues2016.nchuit.cc">網站在此</a></h4>

<h4 id="repo-httpsgithubcomnchuitnchu2016esportsite"><a href="https://github.com/NCHUIT/Nchu2016EsportSite">Repo 位置</a></h4>


    </div>

    <div class='step ' data-x='5000' data-y='5000' data-z='-10500' data-scale='3' >
      <!-- _S9SLIDE_  x=5000 y=5000 z=-10500 scale=3 -->

<h2 id="section-21">接下來我們來看學生會資訊部在這個活動做了啥</h2>


    </div>

    <div class='step slide' data-x='20000' data-y='20000' >
      <!-- _S9SLIDE_  slide x=20000 y=20000 -->

<h3 id="section-22">你有沒有覺得學校的選課<strong>很花時間呢</strong>？</h3>

<p><img src="./nchuit-demo/photo/school.png" alt="Big picture" /></p>


    </div>

    <div class='step slide' data-x='22000' data-y='20000' >
      <!-- _S9SLIDE_  slide x=22000 y=20000 -->

<h2 id="section-23">我想要排通識，可是不知道什麼時候是<strong>空堂</strong></h2>


    </div>

    <div class='step picture' data-x='21400' data-y='21600' >
      <!-- _S9SLIDE_  picture x=21400 y=21600 -->

<h4 id="section-24">如果可以像這樣，把我的課表<code>視覺化</code>該多好？</h4>
<p><img src="./nchuit-demo/photo/time-table.png" alt="Big picture" /></p>


    </div>

    <div class='step ' data-x='29000' data-y='22000' data-scale='4' >
      <!-- _S9SLIDE_  x=29000 y=22000 scale=4 -->

<h2 id="section-25">所以學長(妹子)就挖坑了</h2>

<blockquote>
  <p>我們就傻傻的跳了….</p>
</blockquote>


    </div>

    <div class='step ' data-x='30000' data-y='32000' data-rotate='180' data-scale='4' >
      <!-- _S9SLIDE_  x=30000 y=32000 rotate=180 scale=4 -->

<h2 id="section-26">沒有資料要怎麼寫程式阿？</h2>

<h3 id="api">學校還沒有api，自己爬吧~</h3>


    </div>

    <div class='step slide picture showOnlyWhenPresent' data-x='38400' data-y='32000' data-rotate='270' data-scale='10' >
      <!-- _S9SLIDE_  slide picture showOnlyWhenPresent x=38400 y=32000 rotate=270 scale=10 -->

<h3 id="section-27">因為這隻爬蟲已經有三位學長改過了</h3>

<h3 id="section-28">看懂後再改相對輕鬆很多</h3>

<p><img src="./nchuit-demo/photo/routine.png" alt="Big picture" /></p>


    </div>

    <div class='step slide picture showOnlyWhenPresent' data-x='38400' data-y='32000' data-rotate='200' data-scale='10' >
      <!-- _S9SLIDE_  slide picture showOnlyWhenPresent x=38400 y=32000 rotate=200 scale=10 -->

<h4 id="json">成功產出json囉~~</h4>

<p><img src="./nchuit-demo/photo/json.png" alt="Big picture" /></p>


    </div>

    <div class='step picture showOnlyWhenPresent' data-x='33000' data-y='32000' data-z='-3000' data-rotate='300' data-scale='1' >
      <!-- _S9SLIDE_  picture showOnlyWhenPresent x=33000 y=32000 z=-3000 rotate=300 scale=1 -->

<h3 id="nbsp"> </h3>

<p><img src="./nchuit-demo/photo/noteasy.jpg" alt="Big picture" /></p>


    </div>

    <div class='step picture' data-x='34400' data-y='32000' data-rotate='270' data-scale='6' >
      <!-- _S9SLIDE_  picture x=34400 y=32000 rotate=270 scale=6 -->

<h4 id="bug">怎麼會有<strong>bug</strong>??</h4>

<p><img src="./nchuit-demo/photo/bugjson.png" alt="Big picture" /></p>


    </div>

    <div class='step showOnlyWhenPresent' data-x='36700' data-y='-32000' data-scale='6' >
      <!-- _S9SLIDE_  showOnlyWhenPresent x=36700 y=-32000 scale=6 -->

<h4 id="json-1">回來看一下json檔，才發現</h4>

<p><img src="./nchuit-demo/photo/error.png" alt="Big picture" /></p>


    </div>

    <div class='step showOnlyWhenPresent' data-x='36300' data-y='-24000' data-rotate='20' data-scale='4' >
      <!-- _S9SLIDE_  x=36300 showOnlyWhenPresent y=-24000 rotate=20 scale=4 -->

<p><img src="./nchuit-demo/photo/fuck.jpg" alt="Big picture" /></p>


    </div>

    <div class='step showOnlyWhenPresent' data-x='37000' data-y='-25000' data-rotate='40' data-scale='2' >
      <!-- _S9SLIDE_  x=37000 showOnlyWhenPresent y=-25000 rotate=40 scale=2 -->

<h2 id="section-29">眼淚擦一擦，再把爬蟲改一下吧</h2>

<h2 id="br-">其實就是把<code>&lt;br/&gt;</code>取代掉而已 ㄎ</h2>


    </div>

    <div class='step showOnlyWhenPresent' data-x='37500' data-y='-16000' data-z='-100' data-rotate='60' data-rotate-x='90' data-rotate-y='90' data-rotate-z='90' data-scale='2' >
      <!-- _S9SLIDE_  x=37500 showOnlyWhenPresent y=-16000 z=-100 rotate=60 rotate-x=90 rotate-y=90 rotate-z=90 scale=2 -->

<h4 id="bug-1">怎麼還是有bug??</h4>

<p><img src="./nchuit-demo/photo/nani.jpg" alt="Big picture" /></p>


    </div>

    <div class='step slide' data-x='30000' data-y='20000' data-scale='1' >
      <!-- _S9SLIDE_  slide x=30000 y=20000 scale=1 -->

<h4 id="section-30">同一個<strong>課程代碼</strong>居然有<strong>兩個</strong>課程物件ㄟ！！</h4>

<p><img src="./nchuit-demo/photo/course_conflict.png" alt="Big picture" /></p>


    </div>

    <div class='step slide' data-x='31200' data-y='17000' data-scale='1' >
      <!-- _S9SLIDE_  slide x=31200 y=17000 scale=1 -->

<p>要從這樣: <code>courses[code]</code></p>

<pre><code>改成這樣ㄟ
$.each( courses[code] , function(ik, iv) {

     //statements
})
</code></pre>


    </div>

    <div class='step slide' data-x='32400' data-y='10000' data-scale='1' >
      <!-- _S9SLIDE_  slide x=32400 y=10000 scale=1 -->

<h4 id="section-31">淦 我都沒有函式化ㄟ</h4>

<h4 id="section-32">600多行要怎麼改阿</h4>

<p><img src="./nchuit-demo/photo/js.png" alt="Big picture" /></p>


    </div>

    <div class='step slide' data-x='32400' data-y='10700' data-scale='1' >
      <!-- _S9SLIDE_  slide x=32400 y=10700 scale=1 -->

<p><img src="./nchuit-demo/photo/function.jpg" alt="Big picture" /></p>


    </div>

    <div class='step slide' data-x='32400' data-y='16400' data-scale='1' >
      <!-- _S9SLIDE_  slide x=32400 y=16400 scale=1 -->

<p><img src="./nchuit-demo/photo/perceive.jpg" alt="Big picture" /></p>


    </div>

    <div class='step picture' data-x='34200' data-y='10350' data-z='10000' data-scale='2' >
      <!-- _S9SLIDE_  picture x=34200 y=10350 z=10000 scale=2 -->

<h3 id="section-33">到處討拍</h3>

<h3 id="qaq">討完還是要自己改掉拉 QAQ</h3>

<p><img src="./nchuit-demo/photo/fb.png" alt="img in picture slide" /></p>


    </div>

    <div class='step center slide' data-x='36600' data-y='10350' data-scale='2' >
      <!-- _S9SLIDE_  center slide x=36600 y=10350 scale=2 -->

<h2 id="section-34">現在 計中已經已經把資料產成我們要的格式了</h2>

<h2 id="section-35">再也不用怕爬蟲出錯囉</h2>


    </div>

    <div class='step unclickable showOnlyWhenPresent' data-x='35000' data-y='12050' data-scale='5' >
      <!-- _S9SLIDE_  unclickable showOnlyWhenPresent x=35000 y=12050 scale=5 -->

<h2 id="section-36">感謝學長們、系上老師和計中</h2>

<p><img src="./nchuit-demo/photo/qr.png" alt="Big picture" />
<a href="http://goo.gl/oL4GBk">選課小幫手</a></p>


    </div>

    <div class='step unclickable showOnlyWhenPresent' data-x='35000' data-y='22050' data-scale='5' >
      <!-- _S9SLIDE_  unclickable showOnlyWhenPresent x=35000 y=22050 scale=5 -->

<h2 id="whats-next">What’s Next?</h2>

<ul>
  <li>
    <p>選課小幫手產出來的個人課表（json）-&gt; Tiagenda</p>
  </li>
  <li>
    <p>選課的時候想要查課程評價怎麼辦？</p>
  </li>
</ul>


    </div>

    <div class='step picture' data-x='40000' data-y='40000' data-scale='5' >
      <!-- _S9SLIDE_  picture x=40000 y=40000 scale=5 -->

<h3 id="section-37">這學期資訊社感謝大家的參與！</h3>

<p><img src="http://i.imgur.com/f9Vbs3n.png" alt="the_cat" /></p>

<h5 id="section-38">誒等等！？</h5>


    </div>

    <div class='step ' data-x='45000' data-y='45000' data-scale='5' >
      <!-- _S9SLIDE_  x=45000 y=45000 scale=5 -->

<h2 id="section-39">社課期末作業投票！</h2>


    </div>

    <div class='step ' data-x='50000' data-y='50000' data-scale='5' >
      <!-- _S9SLIDE_  x=50000 y=50000 scale=5 -->

<h2 id="section-40">好啦，真的感謝大家的聆聽！</h2>

<!-- === end markdown block === -->

    </div>


</div>

<div id="loading">
    <h1>SITCON x NCHUIT 台中定期聚 #12 暨 NCHUIT 期末成果發表</h1>
    <h3>中興資訊社 NCHUIT</h3>
    <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="circle" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>
</div>

<div class="controls">
    <div class="arrow prev"></div>
    <div class="arrow next"></div>
</div>

<script src="http://netdna.impressjscdn.com/impressjs/0.5.3/js/impress.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
    var impressInstance;
    $(document).ready(function(){
        impressInstance = impress();
        impressInstance.init();
        /*impressInstance.prev_ori = impressInstance.prev;*/
        impressInstance.next_ori = impressInstance.next;
        impressInstance.next = function(){
            impressInstance.next_ori();
            $("div.step.active").removeClass("future");
        };
        $(".controls .arrow.prev").click(impressInstance.prev);
        $(".controls .arrow.next").click(impressInstance.next);
        if(window.location.hash)
            $("div#impress div.step" + window.location.hash.replace("#/","#")).prevAll().removeClass("future");
        setTimeout(function(){
            $('div#loading').addClass('done');
            setTimeout(function(){
                $('div#loading').remove();

            },1000);
        },2000);
    });
</script>

</body>
</html>