index.html

---
layout: default
title: Home
notitle: true
---

<div id="front-page-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#front-page-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#front-page-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#front-page-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#front-page-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>

    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="{{ site.base }}/img/homepage-carousel/innocent-1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="{{ site.base }}/img/homepage-carousel/matt-1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="{{ site.base }}/img/homepage-carousel/lisa-1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="{{ site.base }}/img/homepage-carousel/ana-1.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#front-page-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#front-page-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
</div>
<script>
    const myCarouselElement = document.querySelector('#front-page-carousel')
    const carousel = new bootstrap.Carousel(myCarouselElement, {
      interval: 5000,
    })
    
</script>


<div class="jumbotron" data-bs-theme="dark">
  <p>
     The <b>Information and Communication Technology for Development (ICTD) Lab</b> is an inter-disciplinary group that explores how technology can improve the lives of underserved populations in low-income regions. Our <a href="{{ site.base }}/research/">research</a> has wide range that includes HCI, Systems, Communication and Data Analytics. We are part of the <a href="http://www.cs.washington.edu/">Department of Computer Science &amp; Engineering</a> at the <a href="http://www.washington.edu/">University of Washington</a>. We collaborate with folks from other departments like <a href="http://globalhealth.washington.edu">Department of Global Health</a> and organizations like <a href="https://www.path.org">PATH</a> and <a href="https://www.redcross.org">Red Cross</a>.
  </p>
</div>

<h2 style="margin-top:2em;margin-bottom:0.5em">Recent Publications</h2>
<div class="row">
  {% assign paperthumbnailcounter = 0 %}
  {% for pub in site.data.pubs %}

    {% if pub.thumbnail %}
      <!--{% increment paperthumbnailcounter %}-->
      <div class="col-md-3 mb-3">
        <div class="card">
          <img src="img/paper-thumbnails/{{ pub.thumbnail }}" class="card-img-top" alt="{{ pub.title }}">
          <div class="card-body">
            <p class="card-text">{{ pub.title }}</p>
          </div>
        </div>
      </div>
    {% endif %}

    {% if paperthumbnailcounter > 8 %}
      {% break %}
    {% endif %}

  {% endfor %}
</div>

<h2 style="margin-top:2em;margin-bottom:0.5em">Updates</h2>
<ul class="news list-unstyled">
{% for post in site.posts limit: site.front_page_news %}
    {% if post.shortnews %}
        <li class="shortnews">
            <span class="date">{{ post.date | date_to_long_string }}</span>
            {{ post.content }}
        </li>
    {% else %}
        <li class="bloglink">
            <span class="date">{{ post.date | date_to_long_string }}</span>
            <a href="{{ post.url }}">&raquo; {{ post.title }}</a>
        </li>
    {% endif %}
{% endfor %}
</ul>
{% assign numposts = site.posts | size %}

{% if numposts >= site.front_page_news %}
<p><a href="{{ site.base }}/blog/">Older posts&hellip;</a></p>
{% else %}
<p><a href="{{ site.base }}/oldnews.html">Older news posts&hellip;</a></p>
{% endif %}