(New)
web technologies
for
astronomy

An interactive presentation @ DIBRIS ~ 2016-06-28 by Davide Ricci

Astronomers spend a lot of time in front of a computer:

using software, programming, surfing the internet

Astronomers: experienced internet users
we deserve modern applications

Web design

eso-archive
is it only a matter of taste?
DesignUsability

Private companies already know

Using a Web-based approach also for astronomy

"User"-centered tasks
"Admin"-centered tasks
"Database"-centered tasks
"Computation"-based tasks

History

Standard LAMP architecture

Linux, Apache, Mysql, Php

The AJAX era: no more page reloading

Asynchronous Javascript and XML

The V8 engine: a gift from Google Chrome

Speed! Javascript as a server-side language

The future is now: the kingdom of browsers

Is this new stuff useful for astronomy?

What do you need to access these technologies?

(→ click here ←)

Web Standards

( “user layer”)

You can google millions of tutorials for

HTML5 Resources

The best sites to learn and get inspiration

How to start

Hust 4 lines to have a full valid HTML5 site

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

Drag and drop, input types, semantic tags


Color:
Date:
Number: (min, max, step)
Range: (min, max, step)
Time:

<audio>, <video> , <track>; <section>, <article>, <figure>,
<figcaption>, <header>, <footer>, <mark>, <aside>, <nav>

CSS Resources

The best sites to understand CSS

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

The most important for scientists

show data
store data
i/o and process data

SVG Resources

how to start

<!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>
    

d3.js Resources

my paragraph

d3.js is a javascript library for manipulating documents based on data , using in particular html and svg elements. Its syntax is similar to the jquery syntax:

	
$("#my-paragraph").click(function(){
  $(this).css("color","orange").fadeOut()
})
	
      
Best sites

<!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→

References

vertighel
thanks
davide.ricci82@gmail.com

Title tag test:
this is for h1

h2 title

h3 title

h4 title

h5 title
h6 title

lists, text, and paragraphs

paragraphs

lorem ipsum sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsumdolor sit amet lorem ipsum dolor sit amet lorem ipsum dolsit amet ipsum dolor sit amet ipsum dolor sit amet

lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit

paragraphs

code highlighting... PHP is annoying

HTML5
      
<!doctype html>
<meta charset="utf-8">
<title>iac</title>
<body>
      
    
javascript
      
$("#myp").click(function(){
  $(this).css("color","orange").fadeOut();
  });
});
      
    
On emacs: M-x sgml-quote
vertighel

images

vertighel