modern scientists
❤
web applications


Il nuovo Web per l'astronomia che verrà

Researchers are experienced internet users

Researchers spend a lot of time in front of a computer:
using software, programming, surfing the internet

Web design

is it only a matter of taste?

click on the image to send me an email
papers:pass the mouse on the image to display titles

Please change your screen resolution to 1024x768
Optimized for Netscape 3.43.2beta on FreeBSD

My personal site

“pass the mouse on the image
to display titles”?

Design↦Usability

Private companies already know

Using a web-based approach also for scientific research

For example:
graphical browsing of large archives, interactive plots, slide presentations

Graphical browsing of large archives

TAOS II, SLOAN, 2MASS... PetaBytes of data!

Interactive plots

Printed graph ≠ graph on screen

Slide presentations

Direcly online, cut/paste
more than LaTeX slides
Formulas? MathML (experimental) ∫ αx dx

Advantages

access, experience, modulatiry, customization



Text,
link
Code 0123
other link





Web Standards

( “user layer”)

You can google millions of tutorials for
HTML5, CSS3, SVG, jQuery, d3.js

HTML5 Resources

HTML5 Spec, HTML5 Rocks!, HTML5 Doctor, Dive Into HTML5


<!DOCTYPE html>
<meta charset="utf-8">
<title>my title</title>
<body>
my text

hello-html.html

Drag and drop, input types, semantic tags

Color:
Date:
Number: (min, max, step)
Range: (min, max, step)
Time:
Datalist:
<audio>, <video>, <track>, <section>,
<article>, <figure>, <figcaption>,
<header>, <footer>, <mark>, <aside>, <nav>

The most important for scientists

> Local Storage
> Application cache
> Server-sent Events
> Canvas
> SVG
> WebGL
> WebCL
> WebRTC

CSS Resources

CSS Spec, Selectors Spec


<!DOCTYPE html>
<meta charset="utf-8">
<title>my title</title>
<style>
  body { color: steelblue; }
</style>
<body>
my text

hello-css.html

SVG Resources

SVG Spec, MDN, D3 API Reference


<!DOCTYPE html>
<meta charset="utf-8">
<title>my title</title>
<style>
  circle { fill: orange; }
</style>
<body>
<svg>
  <circle cx="20" cy="20" r="20"></circle>
</svg>

svg circle→

Static or interactive plots 


<style>
#rects rect{fill: steelblue} 
#rects rect:hover{fill: orange}; 
</style>
<svg id="rects" height="50" width="200" >
  <rect x="0"  y="300" width="20" height="300" />
  <rect x="30" y="500" width="20" height="100" />
  <rect x="60" y="400" width="20" height="200" />
</svg>

interaction via CSS is limited. JavaScript?

jQuery Resources

(a Javascript library)

jQuery.com, W3schools


<!DOCTYPE html>
<meta charset="utf-8">
<body>  
<script src="js/jquery-latest.min.js"></script>
<p id="myp">my paragraph</p>
<script>$(document).ready(function(){
         $("#myp").click(function(){
          $(this).css("color","orange").fadeOut();
         });
        });
</script>

my paragraph

d3.js Resources

d3js.org, MBostock, D3 Woskshop


<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="js/d3.v3.min.js"></script>
<script>
d3.select("body").append("svg").append("circle")
    .attr("cx", 20)
    .attr("cy", 20)
    .attr("r", 24)
    .style("fill", "steelblue");
</script>

svg circle→


from a local csv file



from a remote MySQL server



from a remote MySQL server 2



Multi-instrument cross-filter images archive browser

Server side
technologies

(“admin layer”)

You can google other millions of tutorials for
PHP, MYSQL, MySQLi,
node.js

Final examples

Eclipse Meteo
Observation on the celestial sphere
Radio Galaxy Zoo
Galactic plane: VISTA + UKIRT 1,267,500 x 120,000 pixel TIFF image

Interested? Do you have the skill?
Can you HELP?

References:
Our “Manifesto”
Malaga proceedings and poster
Valencia proceedings
Malaga 2013 proceedings: Sadira