TODO
- create a better video compilation
- generate mini profile figure for faster loading
- ask to add people
- ask to add publications
- ask to add abstract
- create publication filter
- filter extended abstract
- ask to add older publications
- ask to add better figures
- create lightbox to add multiple images
-
Go to https://github.com/ucalgary-ilab/ilab-website/tree/master/content/people
-
To Add: Click
Add file
>Create new File
. To Modify: ClickEdit this file
-
Type file name as
first-last.yaml
. For example,ryo-suzuki.yaml
-
Edit the file. For example
Example 1 (ryo-suzuki.yaml
)
name: Ryo Suzuki
type: faculty
url: https://ryosuzuki.org
scholar: https://scholar.google.com/citations?user=klWjaQIAAAAJ
twitter: https://twitter.com/ryosuzk
facebook: https://www.facebook.com/ryosuzk
email: [email protected]
github: https://github.com/ryosuzuki
linkedin: https://www.linkedin.com/in/ryosuzuki/
Example 2 (christopher-smith.yaml
)
name: Christopher Smith
type: master
url: https://sites.google.com/cse.uiu.ac.bd/ashratuzzavinasha
linkedin: https://www.linkedin.com/in/christopher-smith-uofc/
Example 3 (david-ledo.yaml
)
name: David Ledo
type: alumni
past: phd
now: Autodesk Research
url: https://www.davidledo.com/
scholar: https://scholar.google.com/citations?user=V_2BZDoAAAAJ
Example 4 (bon-adriel-aseniero.yaml
)
name: Bon Adriel Aseniero
type: phd
url: http://bonadriel.com/
scholar: https://scholar.google.com/citations?user=V4nRMoMAAAAJ
twitter: https://twitter.com/HexenKoenig
facebook: https://www.facebook.com/bonadriel
linkedin: https://www.linkedin.com/in/bon-adriel-aseniero-47140560/
The required elements are name
and type
. Other fields are optional.
For the type
, please choose from the following options
- faculty
- phd
- master
- undergrad
- postdoc
- visiting
- alumni
If the member graduates, please modify the profile to alumni
.
Alumni person can spedcify past
(prevous type e.g., phd, master, etc) and now
(current institution).
- Save and commit the new file
-
Go to https://github.com/ucalgary-ilab/ilab-website/tree/master/static/images/people
-
Prepare a profile image. The image needs to be saved as
first-last.jpg
. (The same as the profile file name). For example,ryo-suzuki.jpg
. Do not usepng
orjpeg
or anything else. You don't need to crop or edit to the square shape. The system automatically does. -
Click
Upload files
and upload it -
Save and commit the new file
-
If you want to replace, delete the existing one and do the same process.
-
Go to https://github.com/ucalgary-ilab/ilab-website/tree/master/content/publications
-
To Add: Click
Add file
>Create new File
. To Modify: ClickEdit this file
-
Type file name as
conference-years-lastname.yaml
. For example,uist-2020-suzuki.yaml
,mobilehci-2019-hung.yaml
,chi-ea-2020-suzuki.yaml
-
Edit the file. For example
Example 1 (chi-2018-feick.yaml
)
date: 2018-04
title: "Perspective on and Re-orientation of Physical Proxies in Object-Focused Remote Collaboration"
authors:
- Martin Feick
- Terrance Tin Hoi Mok
- Anthony Tang
- Lora Oehlberg
- Ehud Sharlin
series: CHI 2018
doi: https://doi.org/10.1145/3173574.3173855
keywords: cscw, remote collaboration, object-focused collaboration, physical telepresence, collaborative physical tasks
pages: 13
award: Honorable Mention
video: https://www.youtube.com/watch?v=sfxTHsPJWHY
abstract: "Remote collaborators working together on physical objects have difficulty building a shared understanding of what each person is talking about. Conventional video chat systems are insufficient for many situations because they present a single view of the object in a flattened image. To understand how this limited perspective affects collaboration, we designed the Remote Manipulator (ReMa), which can reproduce orientation manipulations on a proxy object at a remote site. We conducted two studies with ReMa, with two main findings. First, a shared perspective is more effective and preferred compared to the opposing perspective offered by conventional video chat systems. Second, the physical proxy and video chat complement one another in a combined system: people used the physical proxy to understand objects, and used video chat to perform gestures and confirm remote actions."
Example 2 (tvcg-2019-walny.yaml
)
date: 2019-08
title: "Data Changes Everything: Challenges and Opportunities in Data Visualization Design Handoff"
authors:
- Jagoda Walny
- Christian Frisson
- Mieka West
- Doris Kosminsky
- Søren Knudsen
- Sheelagh Carpendale
- Wesley Willett
series: TVCG 2019
doi: https://doi.org/10.1109/TVCG.2019.2934538
keywords: information visualization, design handoff, data mapping, design process
pages: 10
video: https://vimeo.com/360483702
talk: https://vimeo.com/368703151
abstract: "Complex data visualization design projects often entail collaboration between people with different visualization-related skills. For example, many teams include both designers who create new visualization designs and developers who implement the resulting visualization software. We identify gaps between data characterization tools, visualization design tools, and development platforms that pose challenges for designer-developer teams working to create new data visualizations. While it is common for commercial interaction design tools to support collaboration between designers and developers, creating data visualizations poses several unique challenges that are not supported by current tools. In particular, visualization designers must characterize and build an understanding of the underlying data, then specify layouts, data encodings, and other data-driven parameters that will be robust across many different data values. In larger teams, designers must also clearly communicate these mappings and their dependencies to developers, clients, and other collaborators. We report observations and reflections from five large multidisciplinary visualization design projects and highlight six data-specific visualization challenges for design specification and handoff. These challenges include adapting to changing data, anticipating edge cases in data, understanding technical challenges, articulating data-dependent interactions, communicating data mappings, and preserving the integrity of data mappings across iterations. Based on these observations, we identify opportunities for future tools for prototyping, testing, and communicating data-driven designs, which might contribute to more successful and collaborative data visualization design."
The required elements are date
, title
, authors
and series
. Other fields are optional, but strongly recommended.
Aavailable fields are
date:
Conference date (e.g., 2018-04 for CHI'18)
title:
Use double quotation (e.g., "title")
authors:
Name the authors in the list. The profile is automatically linked to the publication based on the name
series:
Conference + Year (e.g., UIST 2020, CHI EA 2021)
doi:
DOI url. Copy and paste from ACM DL or IEEE Xplore. Can be blank until published
keywords:
Paper's keywords. Copy and paste from the paper
pages:
Page-length including references
award:
Can be blank. Either "Honorable Mention" or "Best Paper"
video:
YouTube or Vimeo link
video-2:
If any additional videos
talk:
YouTube or Vimeo link
abstract:
Use double quotation (e.g., "abstract")
You can basically all of the information from ACM Digital Library or IEEE Xplore.
-
Save and commit the new file
-
The publication page is automatically generated and styled based on the information above.
-
Don't forget to add the PDF in
static/pdf/[conf-year-last].pdf
as well
-
Go to https://github.com/ucalgary-ilab/ilab-website/tree/master/static/images/publications/cover
-
Prepare a cover figure for the paper. The image needs to be saved as
conference-year-lastname.jpg
. (The same as the publication file name). For example,uist-2020-suzuki.jpg
,mobilehci-2019-hung.yaml
,chi-ea-2020-suzuki.yaml
. Do not usepng
orjpeg
or anything else. You don't need to crop or edit the aspect ratio. The system automatically does. -
Click
Add file
>Upload files
-
Save and commit the new file
-
If you want to replace, delete the existing one and do the same process.
-
You can also add more figures by just drag-and-drop. (Strongly recommended).
-
Prepare figures you used for the paper.
-
Git clone
git clone [email protected]:ucalgary-ilab/ilab-website.git
- Create a directory as
static/images/publications/figures/[conference-year-lastname]
. For example,static/images/publications/figures/uist-2020-suzuki
cd ilab-website
mkdir static/images/publications/figures/[conf-year-last]
-
Copy and paste all of the figures into the created folder. No need to modify at all. Both jpg, jpeg, png files are available.
-
Git add and git push
git add .
git commit -m 'Add more figures'
git push origin master
You don't need to do this process, but if you're interested, here is the process.
git clone [email protected]:ucalgary-ilab/ilab-website.git
cd ilab-website
npm install
npm run server.js
You can also keep watching the file change by running the following command in the different terminal tab
npm run watch
You don't need to do this process, but if you're interested, here is the process. Usually, please let me know, so that I can deploy and reflect.
Clone the web-build repo from https://github.com/ucalgary-ilab/ucalgary-ilab.github.io in the same directory
cd ..
git clone [email protected]:ucalgary-ilab/ucalgary-ilab.github.io.git gh-pages
Go to the ilab-website
repo and run npm run deploy
cd ilab-website
npm run deploy
That's it.