-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (99 loc) · 6.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!-- creating the first file -->
<!DOCTYPE html> <!-- the version of html to use, there are other versions eg. htmlx but html is most forgiving-->
<html> <!-- this is the start of the html document -->
<head>
<!--<link href="/normalise.css" rel="stylesheet"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> First website</title>
<!-- linking the bootstrap file-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body> <!-- anything that you want to be visible on the web page needs to
in the body --->
<!-- head banner -->
<div class= "jumbotron-header">
<div class = "transbox-header">
<h1> My Site name...</h1>
</div>
</div>
<!--Navigation bar -->
<nav class="navbar navbar-inverse navbar-sticky">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Project name</a>
</div>
<div id = "navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home</a>
<li><a href="#About"> About Me </a></li>
<li><a href="#Blog"> Blog </a></li>
<li><a href="#Something"> Something Else </a></li>
</ul>
</div>
</div>
</nav>
<h2> Information about various things </h2>
<!-- add in different background images, get a banner at the bottom
of each div that foats up when hovered on -->
<div class= "first">
<p> This is the first paragraph that contains some information
It would be cool to coordinate colours so that heading
colours are in the same hues of blue as the ones in the
header banner
</p>
</div>
<div class = "second">
<p> This is the second paragraph with all of its information.
something here about att of the infographics and things
that are inspiring - link to some initial illustrations
think about how the website is going to be structured.
would be good to get some content nailed down so that the site
can be designed to start to show something useful
</p>
<p>
Something about what I am working on , who I am, what
I am interested in. Some images of illustrations/sketches etc.
Add in here a link to the research group web page once that has
been set out - get some content in to this so that the design
can be created.
</p>
<p>
A couple of weeks ago I lead a discussion amongst our research group about visual abstracts. Visual (or graphical) abstracts seem to have garnered some traction recently with suggestions that they can increase the readership of papers when used on social media. I've seen suggestions of their use increasing readership from 3-8 times that of a link to a paper shared without attached visuals, and although I'm sure these figures are rough approximations I think it's worth thinking about the visual abstract as a science communication tool that we can be using to spread the reach of our work.
Visual abstracts were a fairly new concept to me, I've always had an interest in visualisations and infographics but I've never thought of myself as a particularly arty person. Although I've never had any artistic/graphics training (beyond the vast amounts of tracing that I did for my GCSE Art) I do know what I like and what I dont like. I think that is key, I'm not a professional illustrator and there's probably lots of graphic design considerations that haven't even crossed my mind but that's not going to stop me from having a go. We all know that publishing papers is an important part of academic life but if theres something fairly simple that we could be doing to then encourage people to actually read those papers then surely that can only be a good thing.
- side note here about the discussion that we had where other eople didn't like something that I loved -
Visual abstracts seem to have come from the medical research world where they seem to be more common (certainly more so than in ecology) and from a quick scroll through of the search results from #visualabstract many of these medical visuals seem to follow a similar format. - insert some images - whils't these are a good starting point (and are certainly better than nothing) I'm sure people wont mind me saying that they arent the most visually appealing things you've ever seen.
To me it's a no brainer, I know that the way my brain works I'm much more likely to remeber something if it's associated with pictures (partly why I'ver recently been playing around with sketchnotes when summarising my notes on a paper) so the use of a visual seems logical not only to try and encourage people to read your paper but also to get them to remember it. An example of this, during the session I showed everyone some examples of visual abstracts that I had found largely by just searching the hashtag on twitter so that we could discuss which ones we thought were the most effective. One of the examples was this cool graphic for a paper on - diplozoosomething or other the fox eating one - to which someone responded that they remembered having read that paper beacause they had enjoyed the graphic.
</p>
</div>
<p> this is something that I'm trying out so I've started working
in a new branch </p>
<p> check the file on laptop, started writing something there </p>
<img src="/Users/jessic/Pictures/Prints/hadrian.jpg"/ height: 40px>
<!-- insert a table of photos here the photos could be
links to other pages of the website -->
<p> this is a paragraph of text it can contain <strong> bold</strong>
or <em> italic</em>
</p>
<h2> A list </h2>
<p> this list can be turned into links or to images </p>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
</ul>
<!-- this links to the jquery library-->
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src= "js/bootstrap.min.js"></script>
</body>
</html>