index.html

---
layout: global
og_title: 首頁
og_image: 
enable_slick: yes
css: homepage.css
js: homepage.js
partners: true
sponsors: true
donors: false

---

{% assign current = site.data.settings.current | append: "" %}
{% assign recent = site.data.settings.current | minus:1 %}

<main id="homepage">

<!--<section id="hero" class="ui inverted center aligned basic segment marginless">-->
<section id="hero">
  <div class="hero-content">
    <a href="https://ocf.tw/homebutton" class="donate-button">立即捐款</a>
  </div>
</section>

<section id="about" class="ui vertical segment">
  <div class="ui stripe container">
    <div class="ui two column stackable grid">
      <div class="column about-us" >
        <h2>— Co-create the digital future—</h2>
        <p>科技正在改變世界，當面對軟體壟斷、資料透明不足、數位人權侵害等挑戰時，我們選擇用更開放的科技點亮自由、平等的數位未來。</p>
<p>我們持續努力推動開放原始碼、促進政府運作與資料的開放透明，並串聯國內外社群力量，共同嘗試為網路自由與數位人權議題，尋求發聲的可能。
我們長期投入知識共享與人才培育，推廣開放科技在各場域中的應用，同時致力於建立跨領域的信任與合作，讓科技不再只是少數人的工具，而是屬於所有人的資源。</p>
<p>加入我們，用開源的力量，重新定義臺灣與亞太區域的數位未來！</p>
<!--
      <div class="read-more">
        <a href="/about">更多...</a>  
      </div>
-->
      <div class="ui left aligned stripe container" style="padding-left: 0;">
        <a class="support-us-button" href="https://ocf.tw/ocfhome">支持我們</a>
      </div>
      </div>
      <div class="center aligned column">
        <div style="max-width: 450px;">
        <img class="ui fluid image" src="/assets/images/openAbout_ch.png" title="核心領域">
      </div>
      </div>
    </div>
  </div>
</section>

<section id="about" class="ui vertical segment">
  <div class="ui stripe container">
    <div class="ui two column stackable grid">
      <div class="column about-us" >
        <h2>開源北極星－－2025 的航行方向</h2>
        <p>OCF 是台灣唯一同時關注開放原始碼、開放資料、開放政府、數位人權、網路自由五個領域的組織；也具有跨國交流與在地串連的能力！2025，我們打算：
          <br>▶ 提升政府的「開放意識」！<br>▶ 保護第一線的「數位人權」！<br>▶ 提倡全民的「網路自由」！</p>
      <div class="ui left aligned stripe container" style="padding-left: 0;">
        <a class="support-us-button" href="https://blog.ocf.tw/2025/04/2025.html">完整說明</a>
      </div>
      </div>
      <div class="center aligned column">
        <div style="max-width: 600px;">
        <img class="ui fluid image" src="/assets/images/2025purpose.png" title="2025目標">
      </div>
      </div>
    </div>
  </div>
</section>


<!--
活動更新方法
1. 正方形活動宣傳圖片上黑色遮罩
2. 更改下面的活動
3. 更改 assets/images/rea01 ~ rea03.png 圖片
4. 活動不多就把最後面的「更多活動放在最後」
-->
<section id="what_is_happening">
  <div class="project-result-container">
    <h2>最新動態</h2>
    <div class="project-items">
      <a href="https://blog.ocf.tw/2025/03/open-data-survival-civic-tech-open-source.html" class="item">
        <div>
          <img src="assets/images/web_homepage_elements_What Icon 2.svg" class="item-icon" >
          <h2>最新文章</h2> 
        </div>
      </a>
      <a href="https://ooni-research.ocf.tw/docs/blog/2025/03/rightscon25-tor-tails-ooni-after/" class="item">
        <div>
          <img src="assets/images/web_homepage_elements_What Icon 2.svg" class="item-icon" >
          <h2>工作坊回顧</h2> 
        </div>
      </a>
<!--
十週年記錄，放最後
-->
      <a href="https://10years.ocf.tw/"  class="item">
        <div>
          <img src="assets/images/web_homepage_elements_What Icon 2.svg" class="item-icon" >
          <h2>OCF 十週年</h2> 
        </div>
      </a>
    </div>
  </div>
</section>



<section id="what_we_do" >
  
    <div class="what_we_do_container">
      <div class="top-item-container">
        <div class="item">
          {% assign item = site.data.people.orgs.ocf.what_we_do[0] %}
          <div class="item-title-group">
            <img src="./assets/images/web_homepage_elements_How_Icon_1.svg">
            <h2>{{ item.title }}</h2>
          </div>
          <p>
            {{ item.description }}
          </p>
        </div>
        <div class="item-gap"></div>
        <div class="item">
          {% assign item = site.data.people.orgs.ocf.what_we_do[1] %}
          <div class="item-title-group">
            <img src="./assets/images/web_homepage_elements_How_Icon_2.svg">
            <h2>{{ item.title }}</h2>
          </div>            
          <p>
            {{ item.description }}
          </p>
        </div>
      </div>
      <div class="title">
        <div class="divider"></div>
        <h2>我們在做些什麼</h2>
        <div class="divider"></div>
      </div>
      <div class="bottom-item-container">
        <div class="item">
          {% assign item = site.data.people.orgs.ocf.what_we_do[2] %}
          <div class="item-title-group">
            <img src="./assets/images/web_homepage_elements_How_Icon_3.svg">
            <h2>{{ item.title }}</h2>
          </div>  
          <p>
            {{ item.description }}
          </p>
        </div>
        <div class="item-gap"></div>
        <div class="item">
          {% assign item = site.data.people.orgs.ocf.what_we_do[3] %}
          <div class="item-title-group">
            <img src="./assets/images/web_homepage_elements_How_Icon_4.svg">
            <h2>{{ item.title }}</h2>
          </div>  
            <p>
            {{ item.description }}
          </p>
        </div>
      </div>  
    </div>
</section>

<!--
<section id="ocflab" class="ui vertical segment">
  <div class="ui stripe container">
    <h2 class="ui header">OCFLab文章</h2>
    <hr class="ui hidden divider" />
    <div class="ui two column stackable divided grid">
      <div class="column">
        <div class="ui divided relaxed items">

          <div class="item">
            <div class="image">
              <img src="\p\ocflab\ocflab-opencore.jpeg">
            </div>
            <div class="content">
              <a href="https://lab.ocf.tw/2020/04/29/open-core/">
              <h3 class="header">在開源的基礎上開發商用產品：Open Core 的介紹與應用</h3>
              </a>
              <div class="description">
                <p>
                  開源軟體透明、允許所有人分享及修改的特性，發揮群體智慧，造就高品質的軟體開發與維護。然而，多數開源軟體對非技術使用者的門檻較高，不利於推廣。...
                </p>
              </div>
               <div class="ui center aligned stripe container">
                <a class="ui medium yellow button" href="https://lab.ocf.tw/2020/04/29/open-core/">觀看這篇文章<i class="right arrow icon"></i></a>
              </div>
              <div class="extra">
              </div>
            </div>
          </div>

          <div class="item">
            <div class="image">
              <img src="\p\ocflab\ocflab-test.png">
            </div>
            <div class="content">
              <a href="https://lab.ocf.tw/2020/06/10/metadataentry/">
              <h3 class="header">Metadata，讓我們輕鬆撈到資料和加速數位資料鏈結的好幫手！</h3>
              </a>
              <div class="description">
                <p>
                  從零開始快速了解何謂 Metadata？如何用開放授權發揮 Metadata 最大效力？ 並從國外實例看 Metadata 如何小兵立大功，發揮藝文數位化無限潛力！
                </p>
              </div>
              <div class="ui center aligned stripe container">
                <a class="ui medium orange button" href="https://lab.ocf.tw/2020/06/10/metadataentry">觀看這篇文章<i class="right arrow icon"></i></a>
              </div>
              <div class="extra">
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="column">
        <div class="ui divided relaxed items">
          <div class="item">
            <div class="image">
              <img src="\p\ocflab\opendata2.png">
            </div>
            <div class="content">
              <a href="https://lab.ocf.tw/2020/03/12/opendatanextstep/">
              <h3 class="header">邁向下一個開放資料里程碑之前</h3>
              </a>
              <div class="description">
                <p>
                  「開放資料專法」今年即將推出，重新盤點現況，才能踏出正確的下一步!因此，開放文化基金會與不同領域之資料運用公民和資料開放專家合作，以案例和實際流程，釐清開放資料現況與民間實質運用的差距，也希望透過這樣的整體，為即將上路的專法，找出正確的方向。
                </p>
              <div class="ui center aligned stripe container">
                <a class="ui medium blue button" href="https://lab.ocf.tw/2020/06/24/thaubing/">觀看這篇文章<i class="right arrow icon"></i></a>
              </div>
              </div>
              <div class="extra">
              </div>
            </div>
          </div>

          <div class="item">
            <div class="image">
              <img src="\p\ocflab\ocflab-0624.jpg">
            </div>
            <div class="content">
              <a href="https://lab.ocf.tw/2020/06/24/thaubing/">
              <h3 class="header">【開源x開箱】掃了再買：用消費者的力量讓企業做出改變</h3>
              </a>
              <div class="description">
                <p>
                  別再抖內無良廠商！APP 掃條碼，輕鬆看製造商違規紀錄，購物+支持環境正義一兼兩顧！...
                </p>
              <div class="ui center aligned stripe container">
                <a class="ui medium purple button" href="https://lab.ocf.tw/2020/06/24/thaubing/">觀看這篇文章<i class="right arrow icon"></i></a>
              </div>
              </div>
              <div class="extra">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="ui center aligned stripe container">
    <a class="ui huge pink button" href="https://lab.ocf.tw/">觀看更多OCFLab文章<i class="right arrow icon"></i></a>
    -->

    <!-- <a class="ui button" href="/p/{{ recent }}/">近年成果回顧<i class="right arrow icon"></i></a> -->
    <!--
  </div>

</section>
-->

{% if page.partners %}
<section id="partners" class="ui vertical segment">
  <div class="ui stripe container partners-container">
    <img src="assets/images/web_homepage_elements_What Icon 1.svg" class="item-icon" >
    <h2 class="ui header">合作夥伴</h2>
    <div class="ui horizontal center aligned list">

  {% for org_id in site.data.people.relations.partners %}
  {% assign org = site.data.people.orgs[org_id] %}

      <a class="item" target="_blank" href="{{ org.link[0].url }}">
        <img class="logo" src="{{ org.logo }}" alt="{{ org.name }}" />
      </a>

  {% endfor %}

    </div>
  </div>

</section>
{% endif %}

{% if page.sponsors %}
<section id="sponsors">
  <div class="ui stripe container sponsors-container">
    <img src="assets/images/web_homepage_elements_What Icon 1.svg" class="item-icon" >
    <h2 class="ui header">贊助夥伴</h2>
    <div class="ui horizontal center aligned list">

  {% for org_id in site.data.people.relations.sponsors %}
  {% assign org = site.data.people.orgs[org_id] %}
      <a class="item" target="_blank" href="{{ org.link[0].url }}">
        <img class="logo" src="{{ org.logo }}" alt="{{ org.name }}" />
      </a>
  {% endfor %}

    </div>
  </div>
</section>
{% endif %}
<!--
{% if page.donors %}
<section id="donors" class="ui vertical segment">
  <div class="ui stripe container">
    <h2 class="ui header">捐助人</h2>
    <div class="ui center aligned labels">

  {% for donor in site.data.people.relations.donors %}
      <span class="ui label">{{ donor }}</span>
  {% endfor %}

    </div>
  </div>
</section>
{% endif %}
-->
<!-- <section id="ads" class="ui vertical segment">
  <div class="ui stripe container">
    {% include banner_cta.html %}
  </div>
</section> -->

</main>