Skip to content

Commit 3815964

Browse files
caev03caev03
committed
Major Update
1 parent 838f001 commit 3815964

31 files changed

+571
-1049
lines changed

‎README.md

Lines changed: 209 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,211 @@
1+
# The Software Design Lab WebPage Template
2+
3+
Dear maintainer, this webpage was made using a jekyll theme that can be found [here](https://github.com/uwsampa/research-group-web).
4+
5+
The source code can be found in develop branch. In master branch its only the result of the compilation. We are using a gem that makes easier to add a new publication but it cannot be used in the ci pipelines of github.
6+
7+
You need to have ruby and jekyll installed in your computer. Then you have to clone the repository and change to develop branch.
8+
9+
# Building the webpage
10+
11+
Once you are in the development folder use ```jekyll build``` and ```jekyll serve --host 127.0.0.1 --port 8080``` see the result of the page. When all the changes have been done copy the content of the ```_site``` folder, change to master branch and replace all the content. I strongly recommend to run a local server to make sure all the changes are in the page. Then you can push your changes in both branches to the repo.
12+
13+
# Maintaining this webpage
14+
15+
---
16+
## **Home Page**
17+
---
18+
19+
### **Slider**
20+
21+
The photos that appear in the slider can be modified in the index.html.
22+
23+
The images path are added in the file header.
24+
25+
```
26+
...
27+
image: /img/ICSME18LR.jpg
28+
image2: /img/news/BluehackTSDLSlider.jpeg
29+
image3: /img/DSC_0414_Original.jpg
30+
image4: /img/grace.jpg
31+
image5: /img/google18.jpg
32+
image6: /img/peru18.jpg
33+
...
34+
```
35+
36+
and then you have to had a new carrousel item replacing ```<imageKey>``` and ```<imageCaption>```:
37+
38+
```html
39+
<div class="carousel-item">
40+
<img class="d-block w-100" src="{{site.base}}{{ <imageKey> }}" alt="Team">
41+
<div class="carousel-caption d-none d-md-block">
42+
<h5> <imageCaption> </h5>
43+
</div>
44+
</div>
45+
```
46+
47+
### **News**
48+
49+
News can be found in ```_posts``` folder. Everytime you create a news the file must be called like
50+
```
51+
<year>-<month>-<day>-<newsID>.md
52+
```
53+
And its content should be something like this:
54+
```
55+
---
56+
layout: post
57+
title: "ACM SIGSOFT Distinguished Paper Award"
58+
icon: trophy
59+
image: https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Association_for_Computing_Machinery_%28ACM%29_logo.svg/300px-Association_for_Computing_Machinery_%28ACM%29_logo.svg.png
60+
shortnews: true
61+
---
62+
63+
Mario Linares-Vásquez received an ACM DPA for his paper "Automatically Assessing Code Understandability: How Far Are We?", in Proceedings of 32nd IEEE/ACM International Conference on Automated Software Engineering (ASE'17), Urbana-Champaign, Illinois, USA, October 30 - November 3, 2017
64+
```
65+
66+
Depending on the type of news the icon can be:
67+
| Type of news | icon key |
68+
|:---:|:---:|
69+
| New published paper | newspaper-o |
70+
| Award | trophy |
71+
| Talk | slideshare |
72+
73+
The amount of news that are shown in the index is defined in the ```_config.yml``` using the key ```front_page_news```.
74+
75+
---
76+
## **People**
77+
---
78+
79+
People is modified in the ```_data/people.yml```. We have 5 posible roles in our research lab:
80+
81+
| Role | Who has this role |
82+
|---|---|
83+
| faculty | Professors |
84+
| grad | Ph.D. and Ms. students |
85+
| ugrad | Undergraduate students |
86+
| collab | External Collaborators |
87+
| alum | Past students of TSDL |
88+
89+
when a person is added to the ```people.yml``` file it must follow the following template:
90+
91+
```
92+
<id>:
93+
display_name: "<fullName>"
94+
role: "<role>"
95+
image: "/img/people/<imageName>.jpg"
96+
webpage: "<personalPageURL>"
97+
bio: "<description Of Current position>"
98+
```
99+
100+
Is important to see that if a person do not have a personal page that tag must be ommited. Also, alumni dont use either webpage or bio tag.
101+
102+
103+
---
104+
## **Research Projects**
105+
---
106+
107+
Research projects can be found in ```_rschprojects/```. Each project has its own MarkDown file and usualy follow this template:
108+
```
109+
---
110+
title: "Mutation Testing"
111+
description: Mutation Testing is a type of software testing where we mutate (change) certain statements in the source code and check if the test cases are able to find the errors. It is a type of White Box Testing which is mainly used for Unit Testing. The changes in mutant program are kept extremely small, so it does not affect the overall objective of the program. In this moment, we have open projects in NodeJS and Android Framework
112+
113+
114+
people:
115+
- marioLinares
116+
- camiloEscobar
117+
- diegoRodriguez
118+
- collGabrieleBavota
119+
- collMassimiliano
120+
- collDenysPosh
121+
122+
topic: Software Testing
123+
layout: project
124+
image: /img/project-images/mutation.png
125+
126+
---
127+
```
128+
129+
Right now the topic tag defines how they are group in the web page, currently we have 3 possible values:
130+
- Automated Software Engineering
131+
- Quality Attributes in Mobile Apps
132+
- Software Testing
133+
134+
---
135+
## **Software Development Projects**
136+
---
137+
This projects follow this template:
138+
```
139+
---
140+
title: "FIND: A Software Platform Against Human Trafficking"
141+
description: Technological platform under development. This solution is being financed by the United Nations Office on Drugs and Crime. It includes an AI module based on IBM Watson, mobile applications and a dashboard.
142+
143+
144+
people:
145+
- dianaSolano
146+
- lauraBello
147+
- camiloEscobar
148+
- santiagoLinan
149+
- sergioYodeb
150+
- marioLinares
151+
link: https://thesoftwaredesignlab.github.io/blog/2018/09/01/bluehack.html
152+
layout: project
153+
image: /img/project-images/findBlueHack.jpg
154+
---
155+
```
156+
157+
Here there is no topic and projects are shown directly, but there is a link tag that is important to fill.
158+
159+
---
160+
## **Publications**
161+
---
162+
163+
If you want to add a new publication to the page just copy the paper/journal bibtex content into ```bib/pubs.bib```. Jekyll and Jekyll-scholar will do all the magic and will generate a new entry.
164+
165+
However, there are some important things to check before pushing your changes:
166+
1. New publications bibtex key must be meaninfull, we recommend to use:
167+
```
168+
<firstLastnameOfFirstAuthor><Year><toolName|confName|journalName|meaningfulWor>
169+
---
170+
linan2018rip
171+
linares2017cel
172+
rodriguez2018mutode
173+
```
174+
2. If the bibtex has the keyworks tag and its content its to long its better to remove it because bibtex link in webpage generates a div whose height is based on the number of lines of the bibtex, if the keywords are too long the layout breaks.
175+
176+
The filter over the publications is done in the ```publications.html``` file. In case you want to change something.
177+
178+
---
179+
## **Code**
180+
---
181+
182+
183+
If you want to change the template that
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+
1209
Research Group Web Site Template
2210
================================
3211

@@ -58,7 +266,7 @@ For both long-form blog posts and short news updates, we use Jekyll's blogging s
58266
The file must begin with [YAML front matter][yfm]. For news updates, use this:
59267

60268
---
61-
layout: post
269+
` layout: post
62270
shortnews: true
63271
---
64272

‎_config.yml

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
name: The Software Design Lab
22
url: https://thesoftwaredesignlab.github.io/
33

4-
exclude: [bibble, README.md, Makefile, screenshot.png]
4+
exclude: [_rschprojects/accaa-projects.md, _rschprojects/ioaa-project.md, Makefile, screenshot.png]
55

66
# colorize code snippets with the pygments module
77
highlighter: rouge
@@ -37,13 +37,22 @@ front_page_news: 8
3737
# Base pathname for links.
3838
base: ''
3939

40-
include: ["_rschprojects","_dvlpprojects"]
40+
include: ["_rschprojects","_dvlpprojects", "_teaching"]
4141

4242
collections:
4343
rschprojects:
4444
output: true
4545
dvlpprojects:
4646
output: true
47+
teaching:
48+
output: true
49+
50+
scholar:
51+
style: apa
52+
source: ./bib
53+
sort_by: year,title
54+
order: descending,ascending
55+
bibliography_template: bib
4756

4857

4958
# Navigation bar links.
@@ -52,6 +61,8 @@ navigation:
5261
link: /
5362
- title: People
5463
link: /people.html
64+
- title: Teaching
65+
link: /teaching.html
5566
- title: Research
5667
link: /research.html
5768
- title: Development
@@ -60,3 +71,7 @@ navigation:
6071
link: /publications.html
6172
- title: Code
6273
link: /code.html
74+
- title: Contact
75+
link: /contact.html
76+
77+
plugins: ['jekyll/scholar']

‎_layouts/bib.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
layout: default
3+
---
4+
5+
<h5><span class="bibtitle">{{ entry.title }}.</span> <span class="bibyear">{{ entry.year }}</span></h5>
6+
<span class="bibauthor">{{ entry.author }}.</span><br>
7+
<em class="bibbook">{% if entry.booktitle %}{{ entry.booktitle}}{% else %}{{ entry.journal}}{%endif%}</em><br>
8+
[<a href="{{ entry.url }}"> doi: <span class="bibdoi">{{ entry.doi }}</span> </a>]
9+
[<a href="#" data-toggle="modal" data-target="#{{ entry.key }}"> Bibtex </a>]
10+
{% if entry.preprint %} [<a href="{{ entry.preprint }}"> preprint </a> ] {% endif %}
11+
{% if entry.onlineappen %} [<a href="{{ entry.onlineappen }}"> Online Appendix </a> ] {% endif %}
12+
13+
<div class="modal fade" id="{{ entry.key }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
14+
<div class="modal-dialog modal-dialog-centered" role="document">
15+
<div class="modal-content">
16+
<div class="modal-header">
17+
<h5 class="modal-title" id="exampleModalLongTitle">{{ entry.title }}</h5>
18+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
19+
<span aria-hidden="true">&times;</span>
20+
</button>
21+
</div>
22+
<div class="modal-body">
23+
{% assign temp = entry.bibtex | newline_to_br%}
24+
{% assign my_array = temp | split: "<br />" %}
25+
<textarea name="{{entry.key}}" id="id{{entry.key}}" style="width:58vw" rows="{{ my_array | size }}">
26+
{{ entry.bibtex }}</textarea>
27+
</div>
28+
</div>
29+
</div>
30+
</div>

‎_rschprojects/eventual-connectivity.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
22
title: "Eventual Connectivity on Android Apps"
33
description: Study on "Eventual Connectivity" Issues exhibited by Android apps in-the-wild. By manually executing and inspecting 50 open source Android apps we build a catalog of (i) bad practices/issues, and (ii) hybrid practices that are exhibited dynamically by Android apps and could affect users perceived quality. The execution was based on 986 scenarios we designed (in total) for the 50 apps. We found 316 instances of 10 categories of "eventual connectivity" issues (which account for an average of 6.32 issues per app), and 4 instances of two categories of hybrid practices.
4-
5-
64

75
people:
86
- camiloEscobar

‎_teaching/201620dataStructures.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Data Structures"
3+
description: "This course looks up to create abilities in designing and handling data structures in main memory. It improves the student skills for proposing and defending the design of data structures to solve a problem, using as argument the algorith complexity, memory space usage and its flexibility"
4+
5+
people:
6+
- marioLinares
7+
8+
term: 2016-20
9+
10+
layout: project
11+
image: /img/project-images/closed.png
12+
---

‎_teaching/201620webDevelopment.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Web App Development"
3+
description: "The purpose of the course, for the student, is to acquire practical experience in development using web technologies. The class studies the evolution and milestones that web development had since its beginning, from both technologies point of view and new requirements of apps. Along with several projects to practice the learned technologies."
4+
5+
people:
6+
- marioLinares
7+
8+
term: 2016-20
9+
10+
layout: project
11+
image: /img/project-images/closed.png
12+
---

‎_teaching/201710dataStructures.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Data Structures"
3+
description: "This course looks up to create abilities in designing and handling data structures in main memory. It improves the student skills for proposing and defending the design of data structures to solve a problem, using as argument the algorith complexity, memory space usage and its flexibility"
4+
5+
people:
6+
- marioLinares
7+
8+
term: 2017-10
9+
10+
layout: project
11+
image: /img/project-images/closed.png
12+
---

‎_teaching/201710mobileDevelopment.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Mobile App Development"
3+
description: "This class looks up to generate the needed skills to design and develop technological solutions using mobile platforms. Therefore, specific topics as: mobile devices behaviour, mobile infraestructure, mobile environment infraestructure and the mobile development process, are studied through this course."
4+
5+
people:
6+
- marioLinares
7+
8+
term: 2017-10
9+
10+
layout: project
11+
image: /img/project-images/event.png
12+
---

‎_teaching/201720automatedTests.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Automated Tests"
3+
description: "Both web and mobile apps, are fundamental part of the daily life of people. Therefore, the impact of an error in an app could produce anger and affect directly life and health of people. One way to mitigate this, is through the usage of sistematic test processes that take advantage of automation to reduce time and improve the understanding of possible errors. This course will present to the students the current methodologies to exploit automated test processes, and the available tools to execute web and mobile oriented tests. In this class student will both learn and use the state-of-the-art automated test approaches."
4+
5+
people:
6+
- marioLinares
7+
8+
term: 2017-20
9+
10+
layout: project
11+
image: /img/teaching/banner.png
12+
---

‎_teaching/201720mobileDevelopment.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: "Mobile App Development"
3+
description: "This class looks up to generate the needed skills to design and develop technological solutions using mobile platforms. Therefore, specific topics as: mobile devices behaviour, mobile infraestructure, mobile environment infraestructure and the mobile development process, are studied through this course."
4+
5+
people:
6+
- marioLinares
7+
- sergioYodeb
8+
9+
term: 2017-20
10+
11+
layout: project
12+
image: /img/project-images/event.png
13+
---

0 commit comments

Comments
 (0)