final project report - cs.sjtu.edu.cn

Final Project Report

Qu Zhiyuan Ma Wenze Bao Xiaoyi Zhou Zihan

June 24, 2018

1

Contents

1 Website Design 31.1 Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Overall Design Philosophy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Added Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Web Spider 32.1 spider for related information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.1 what we want . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.1.2 realization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.1.3 result display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2 spider for personal photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2.1 what we want . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2.2 realization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2.3 result display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Data Visualization 63.1 Conference Comparison Using EchartsPie . . . . . . . . . . . . . . . . . . . . . . . 6

3.1.1 Using Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.1.2 Function Implement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.1.3 Result Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.2 Academic Life Using Echarts.Line and Bar Graphs . . . . . . . . . . . . . . . . . . 83.2.1 Function Implement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83.2.2 Result Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.3 Mentorship Using Tree Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.3.1 Function Implement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.3.2 Result Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.4 D3 force graph for corperation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.4.1 Using Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.4.2 Function Implement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.4.3 result display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.4.4 potential improvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4 User Interface 154.1 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.2 Why use CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3 CSS Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.3.1 The element selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3.2 The id selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3.3 The class selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.4 Flat Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.4.1 Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.4.2 Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.4.3 Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2

1 Website Design

In this section, we’d like to introduce our design philosophy and function we add that enhanceuser’s experiences.

1.1 Logic

1.2 Overall Design Philosophy

First of all, this is an academic search website. All the contents in our websites tend to be moreacademical. So we don’t add some fancy things which only make it more beautiful. Practicabilityshould be the main thing we are chasing for.

1.3 Added Function

In order to make information more comprehensive. We use web spider to get the image ofevery author and their related information on bing website. We also implement data visualizationof author’s academic life, cooperation and mentorship. What’s more, for the conference page, weadd echartsPie for users to compare these conferences conveniently.

2 Web Spider

Introduction to Web Spider A Web crawler, sometimes called a spider, is an Internet botthat systematically browses the World Wide Web, typically for the purpose of Web indexing.Here,we use some packages in python to find certain information of the searched author.

3

2.1 Spider for Related Information

2.1.1 What We Want

What we want to get is not only the information from our database, but also some relatedpages from the intenet. Therefore, we use bing to search the author, and get 10 pages that isregarded as "most related".

2.1.2 Realization

1. Replace the "space" in name with "+" for convenience, and get the url for the search page.

2. Use request in urllib to download it as a file.

3. Use BeautifulSoap in bs4 to find those that are labeled "h2". (First ,we manually view thesource code of one search page, and found the things that are common for the things thatwe want. We find that all the src that we want have label h2)

4. Use Chinese name as key and use href as value.

5. Convert it into json file and store it.

1 from bs4 import Beaut i fu lSoup2 from u r l l i b import r eque s t3 import json , sys4 de f download ( u r l ) :5 i f u r l i s None :6 re turn None7 req = reques t . Request (8 ur l ,9 data=None ,

10 headers={11 ’ User−Agent ’ : ’ Moz i l l a /5 .0 ␣ (Windows␣NT␣ 1 0 . 0 ; ␣WOW64) ␣

AppleWebKit /537.36 ␣ (KHTML, ␣ l i k e ␣Gecko ) ␣ ’12 ’Chrome /66 . 0 . 3359 . 181 ␣ Sa f a r i /537 .36 ␣ ’13 } ,14 )15 re sponse = reques t . ur lopen ( req )16

17 i f r e sponse . getcode ( ) != 200 :18 re turn None19 re turn response . read ( )20

21

22 de f prase ( ur l , html_cont ) :23 i f u r l i s None or html_cont i s None :24 re turn25 soup = Beaut i fu lSoup ( html_cont , "html . pa r s e r " )26 data1 = {}27 t i t l e s = soup . f i nd_a l l ( "h2" , l im i t =10)

4

28 f o r t i t l e in t i t l e s :29 data1 [ t i t l e . a . get_text ( ) . s t r i p ( ) ] = t i t l e . a . get (

’ h r e f ’ )30

31 re turn data132

33 name = " a l b e r t ␣ de l ␣bimbo"34 name_ = name . r ep l a c e ( "␣" , "+" )35 mode_url = " https : // cn . bing . com/ search ?q=%s&ensearch=1&FORM=

BESBTB"36 new_url = mode_url % name_37 pr in t ( new_url )38 htm_cont = download ( new_url )39 data = prase ( new_url , htm_cont )40 pr in t ( data )41 with open ( "D:\XAMPP\htdocs \dgd\\ bing \\"+name + ’ . j son ’ , ’w ’ ) as

j s o n_ f i l e :42 j s o n_ f i l e . wr i t e ( j son . dumps( data ) )

2.1.3 Result Display

2.2 Spider for Personal Photo

2.2.1 What We Want

Out of curiosity, most people want to take a look at the person that we search. Thus, we wantto get one personal photo for every author. After trying, we found that google scholar providespersonal academic archives for almost every author in data, and there is exactly one photo on thepage for the author.

5

2.2.2 Realization

It is similar to what we do to find related information. But this time it is a little more difficult.

1. we cannot find the transformation rule between url and the author name directly, so we haveto search, and select the first page.

2. google is banned in China, so we have to use mirror websites or vpn. But both of them areslow(5s for per author)

3. all the given names are spelled in English, but not all the names on website are spelled inEnglish. So sometimes we cannot get the page for the author even if it exists.


3 Data Visualization

In this section, we aim to implement the data visualization of conference comparison, author’sacademic life, mentorship of authors. And we choose to use echarts(tools for data visualization)and d3 to achieve them.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bringdata to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the fullcapabilities of modern browsers without tying yourself to a proprietary framework, combiningpowerful visualization components and a data-driven approach to DOM manipulation.

ECharts is a free, powerful charting and visualization library offering an easy way of addingintuitive, interactive, and highly customizable charts to your commercial products. It is written inpure JavaScript and based on zrender, which is a whole new lightweight canvas library.

3.1 Conference Comparison Using EchartsPie

EchartsPie is our best choice for conference comparison on the number of published papers.

3.1.1 Using Package

1 <s c r i p t type="text / j a v a s c r i p t " s r c="echa r t s . j s "></s c r i p t >2 <s c r i p t s r c="jquery −3 . 3 . 1 . j s "></s c r i p t >3 <div id="echar t sP i e " s t y l e="width : 600px ; he ight :400 px;"></div>

6

3.1.2 Function Implement

First, Mysql query for the amount of papers.

1

2 SELECT ConferenceName , count (∗ )3 FROM papers LEFT JOIN con f e r enc e s USING( ConferenceID )4 GROUP BY ConferenceID ORDER BY count (∗ ) ;

Second,the basic code construction of echartsPie:

1

2 <sc r i p t >3 var e cha r t sP i e ;4 var opt ion = {5

6 t o o l t i p : {7 t r i g g e r : ’ item ’ ,8 f o rmatte r : "{a} <br/>{b} : {c} "9 } ,

10 l egend : {11 o r i e n t : ’ v e r t i c a l ’ ,12 x : ’ l e f t ’ ,13 data : [ ’ AAAI’ , ’ IJCAI ’ , ’CVPR’ , ’ECCV’ , ’ ICCV’ , ’ ICML

’ , ’SIGKDD’ , ’ NIPS ’ , ’ACL’ , ’EMNLP’ , ’NAACL’ , ’SIGIR ’ , ’WWW’ ]

14 } ,15 too lbox : {16 show : true ,17 f e a t u r e : {18 mark : {show : t rue } ,19 dataView : {show : true , readOnly : f a l s e } ,20 magicType : {21 show : true ,22 type : [ ’ pie ’ , ’ funnel ’ ] ,23 opt ion : {24 funne l : {25 x : ’25\% ’ ,26 width : ’50\% ’ ,27 funne lA l i gn : ’ l e f t ’ ,28 max : 154829 }30 }31 } ,32 r e s t o r e : {show : t rue } ,33 saveAsImage : {show : t rue }34 }35 } ,

7

36 c a l c u l a b l e : true ,37 s e r i e s : [38 {39 name : ’ con f e r ence comparison ’ ,40 type : ’ pie ’ ,41 rad iu s : ’55% ’ ,42 cente r : [ ’50% ’ , ’60% ’ ] ,43 data : j son44 }45 ]46 } ;47

48 e cha r t sP i e = echar t s . i n i t ( document . getElementById ( ’echart sPie ’ ) ) ;

49 $ ( func t i on ( ) {50 e cha r t sP i e . setOption ( opt ion ) ;51

52 }) ;53 </sc r i p t >


3.2 Academic Life Using Echarts.Line and Bar Graphs

We complete a transformation between line and bar graph to describe academic life of everyauthor.


Frontend: The basic code construction of this two graphs.

1

2 <sc r i p t >3 $ . post (" academic_l i f e_ser . php" , {4 AuthorId : "<?php echo $_GET[" author id " ] ; ?>"5 } ,6 f unc t i on ( json_data ) {

8

7 var myChart = echar t s . i n i t ( document . getElementById ("academic_l i f e ") ) ;

8 var opt ion = {9 t i t l e : {

10 t ex t : ’ Academic L i f e ’ ,11 c o l o r : ’ white ’12 } ,13 t o o l t i p : {14 t r i g g e r : ’ ax i s ’ ,15 ax i sPo in t e r : {16 type : ’ l i n e ’ ,17 l i n e S t y l e : {18 c o l o r : ’ white ’ ,19 width : 1 ,20 type : ’ s o l i d ’21 }22 } ,23 f o rmatte r : f unc t i on ( va lue ) {24 var template = "" ;25 template += ’ Publ i shyear : ’ + value [ 0 ] . ax i sValue + "<br

/>";26 template += ’ Paper : ’ + value [ 0 ] . data ;27 re turn template ;28 }29 } ,30 too lbox : {31 show : true ,32 f e a t u r e : {33 mark : {show : true , c o l o r : ’ white ’ } ,34 dataView : {show : true , readOnly : t rue } ,35 magicType : {show : true , type : [ ’ l i n e ’ , ’ bar ’ ] } ,36 r e s t o r e : {show : t rue } ,37 saveAsImage : {show : t rue }38 }39 } ,40 c a l c u l a b l e : true ,41 xAxis : [ {42 type : ’ category ’ ,43 name : ’ publ i shyear ’ ,44 boundaryGap : f a l s e ,45 data : json_data [ " year " ]46 } ] ,47 yAxis : [ {48 type : ’ value ’ ,49 name : "number o f paper "50 } ] ,51 l egend : {

9

52 data : [ ’ numofpaper ’ ]53 } ,54 s e r i e s : [ {55 i t emSty l e : {56 normal : {57 l i n e S t y l e : {58 c o l o r : ’# f b f b f f ’59 }60 }61 } ,62 name : ’ numofpaper ’ ,63 type : ’ l i n e ’ ,64 data : json_data [ " number " ] ,65 markPoint : {66 data : [67 { type : ’max ’ } ,68 { type : ’min ’ }69 ]70 }71 } ]72 } ;73 myChart . setOption ( opt ion ) ;74 }75 ," j son ")76 </sc r i p t >

Backend: dynamic data collection.

1 $author_id=$_POST[" AuthorId " ] ;2 $data = array ( ) ;3 $year = array ( ) ;4 $number = array ( ) ;5 $ sq l="SELECT PaperPublishYear , count (∗ )6 FROM paper_author_a f f i l i a t i on LEFT JOIN papers USING(PaperID )

WHERE AuthorID=’"7 . $author_id . " ’ GROUP BY PaperPublishYear ORDER BY

PaperPublishYear ; " ;8 $ r e s u l t = mysqli_query ( $conn , $ sq l ) ;9 whi le ( $row = mysql i_fetch_array ( $ r e su l t , MYSQLI_ASSOC) ) {

10 $year [ ]= $row [ " PaperPublishYear " ] ;11 $number [ ]= $row [" count (∗ ) " ] ;12 }13 $data [ " year " ] = $year ;14 $data [ " number " ] = $number ;15 echo json_encode ( $data ) ;

10


3.3 Mentorship Using Tree Graph


Frontend: The basic code construction of this two graphs. Backend:STEP 1:Mentorship database foundation .

1

2 de f has_corperat ion ( ai , a j ) :3 g l oba l a l l_papers4 f o r m in a l l_papers [ a i ] :5 f o r n in a l l_papers [ a j ] :6 i f m == n :7 re turn True8 re turn Fal se9 hey_paper = open (" a l l_papers . pkl " , " rb ")

10 a l l_papers = p i c k l e . load ( hey_paper )11 cur so r = connect ion . cu r so r ( )12 cur so r . execute (" s e l e c t author_id from authors ")13 a l l_authors = cur so r . f e t c h a l l ( ) # s t o r e a l l authors14 num_of_authors = len ( a l l_authors )15 l i s t_autho r s = [ a l l_authors [ i ] [ 0 ] f o r i in range (0 ,

num_of_authors ) ]16 authors_of_corperat ion = [ ]17 f o r i in range ( num_of_authors ) :18 i f i % 1000 == 0 :19 pr in t ( i )20 f o r j in range ( i +1, num_of_authors ) :21 i f has_corperat ion ( i , j ) :22 authors_of_corperat ion . append ( (

l i s t_autho r s [ i ] , l i s t_autho r s [ j ] ) )23 pr in t ( authors_of_corperat ion )24

25 cop_authors = open (" authors_of_corperat ion . pkl " , "wb")26 p i c k l e . dump( authors_of_corperat ion , cop_authors )27 connect ion = pymysql . connect ( host=" l o c a l h o s t " , user="root " ,

password="", db="main_db" , cha r s e t="ut f8 ")

11

28 cur so r = connect ion . cu r so r ( )29 cur rent = open (" authors_of_corperat ion . pkl " , " rb ")30 pa i r s = p i c k l e . load ( cur rent )31

32 a l l_ f e a tu r e = [ ]33 f o r pa i r in pa i r s :34 i f ( p a i r s . index ( pa i r ) ) % 5000 == 0 :35 pr in t ( pa i r s . index ( pa i r ) )36 a l l_ f e a tu r e . append ( co l l e c t_data ( pa i r [ 0 ] , pa i r [ 1 ] ) )37 f eature_array = np . array ( a l l_ f e a tu r e )38 output = open (" f e a tu r e . pkl " , "wb")39 p i c k l e . dump( feature_array , output )40 cur so r = connect ion . cu r so r ( )41 cur so r . execute ("DROP TABLE IF EXISTS teacher_and_student ")42 c reate_tab le = """CREATE TABLE teacher_and_student (43 number text ,44 t eacher CHAR(8) ,45 student CHAR(8)46 ) """47 cur so r . execute ( c reate_tab le )48 teacher_and_student = open (" teacher_and_student . pkl " , " rb ")49 data = p i c k l e . load ( teacher_and_student )50

51 f o r i in range ( l en ( data ) ) :52 s q l = "INSERT INTO teacher_and_student (number , teacher ,

s tudent ) va lue s ( ’ {0} ’ , ’ {1} ’ , ’{2} ’ ) " . format ( i , data[ i ] [ 0 ] , data [ i ] [ 1 ] )

53 cur so r . execute ( s q l )54 connect ion . commit ( )

STEP 2: Dynamic data collection of tree graph.

1 $ sq l ="SELECT student , AuthorName FROM teacher_and_student LEFTJOIN authors ON teacher_and_student . student=authors . AuthorIDWHERE Teacher= ’".$_POST[" author id " ] . " ’ " ;

2 $ r e s u l t = mysqli_query ( $con , $ sq l ) ;3 $ch i l d r en = array ( ) ;4 whi le ( $row=mysql i_fetch_array ( $ r e s u l t ) )5 {6 $ch i l d r en [ ]= array ("name"=>$row [ 1 ] , " va lue"=>$row [ 0 ] ) ;7 }8 $data = array ( ) ;9 $data [ " name" ] = $_POST[" authorname " ] ;

10 $data [ " va lue " ] =$_POST[" author id " ] ;11 $data [ " ch i l d r en " ] = $ch i l d r en ;12 echo json_encode ( $data ) ;

12


3.4 D3 force graph for corperation

3.4.1 Using Package

1 <s c r i p t type="text / j a v a s c r i p t " s r c=" j s / jquery −3 . 3 . 1 . j s "></s c r i p t>

2 <s c r i p t s r c="https : // d3 j s . org /d3 . v4 . min . j s "></s c r i p t >3 <svg width="1000" he ight="1000" s t y l e="text−a l i g n : c en t e r"></svg

>


Introduction to D3 D3.js is a JavaScript library for manipulating documents based on data.It helps bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards givesus the full capabilities of modern browsers without tying ourselves to a proprietary framework,combining powerful visualization components and a data-driven approach to DOM manipulation.

our aim In this part, we aim to draw a graph composed of nodes and links to show the relation-ship of the author and his or her coauthors, and D3 becomes our option.

nodes and links We use every node to represent an author, and the node that represents thesearched author is put exactly in the center. Links between two authors show that there exists atleast one corperation.

collect data We receive the author name and the id by post method.

1. By MySQL sentences, we can search for all the papers of the author, and return an arraythat contains them.

2. For each paper, we can get the authors. We put all the author in an array. Don’t forget thesearched author.

3. We check all the corperation between those in the author array using foreach sentence.

4. We name the authors in array as nodes, and the searched author should be shown in adifferent style.

5. We name the corperation as links, and it is also an array

13

6. The nodes and links are packed as json file for potential useage.

And here is part of the data we collect:

1 {"nodes " : [ { " id " :"77CE783B" ,"name" :" s t e f ano b e r r e t t i " ," group " : 5} ,2 {" id " :"7C0FF829" ,"name" :" p i e t r o pala " ," group " : 5} ,3 {" id " :"04AC541B" ,"name" :" l o r enzo s e i d e n a r i " ," group " : 5} ,4 {" id " :"8176A818" ,"name" :" f e d e r i c o b a r t o l i " ," group " : 5} ,5 {" id " :"7EE192AE" ,"name" :" svebor karaman" ," group " : 5 } ] ,6 " l i n k s " : [ { " source " :"77CE783B" ," t a r g e t " :"293DFE94" ," va lue " : 1} ,7 {" source " :"77CE783B" ," t a r g e t " :"7C0FF829" ," va lue " : 1} ,8 {" source " :"77CE783B" ," t a r g e t " :"7F55B076" ," value " : 1} ,9 {" source " :"77CE783B" ," t a r g e t " :"04AC541B" ," value " : 1} ,

10 {" source " :"77CE783B" ," t a r g e t " :"19D16572 " ," va lue " : 1} ,11 {" source " :"77CE783B" ," t a r g e t " :"78A5A6AC" ," value " : 1} ,12 {" source " :"293DFE94" ," t a r g e t " :"77CE783B" ," value " : 1} ,13 {" source " :"293DFE94" ," t a r g e t " :"7C0FF829" ," va lue " : 1} ,14 {" source " :"293DFE94" ," t a r g e t " :"04AC541B" ," value " : 1 } ] }

draw graph After we successfully write the auxiliary file D3.php, we can continue our mainfunction to draw a graph.

1. We choose a style in the library. The style should work well with our page.

2. We get the data, set the nodes and links.

3. To make the graph more dynamic, we allow the user to drag the nodes, and the others willmove correspondingly.

4. To make our page look better we set animation.

14

3.4.3 result display

3.4.4 potential improvement

1. Here in our file, the graph can only show whether there exist corpetation, but it can not shownumber of the corperation between two authors (tight or loose ). Actually, we may count thetimes of corperation of every two authors in the author array, and set the number as anotherattribute of nodes. In our graph, the distance between two authors can reflect the times ofcorperation.

2. In all the links, we are especially interested in the links with one author as the searched one,so these links can also be shown in another style.

4 User Interface

4.1 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentationof a document written in a markup language like HTML. CSS is a cornerstone technology of theWorld Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors,and fonts. This separation can improve content accessibility, provide more flexibility and controlin the specification of presentation characteristics, enable multiple web pages to share formatting

15

by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in thestructural content.

Separation of formatting and content also makes it feasible to present the same markup pagein different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices.To conclude:

CSS stands for Cascading Style Sheets;CSS describes how HTML elements are to be displayed on screen, paper, or in other media;CSS saves a lot of work. It can control the layout of multiple web pages all at once;External stylesheets are stored in CSS files.

4.2 Why use CSS?

CSS is used to define styles for your web pages, including the design, layout and variationsin display for different devices and screen sizes. HTML was NEVER intended to contain tags forformatting a web page! HTML was created to describe the content of a web page, like:

1 <h1>This i s a heading</h1>2 <p>This i s a paragraph .</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, itstarted a nightmare for web developers. Development of large websites, where fonts and colorinformation were added to every single page, became a long and expensive process.To solve thisproblem, the World Wide Web Consortium (W3C) created CSS.CSS removed the style formattingfrom the HTML page!

The style definitions are normally saved in external .css files. With an external stylesheet file,you can change the look of an entire website by changing just one file!

4.3 CSS Selector

4.3.1 The element selector

The element selector selects elements based on the element name.You can select all <button> elements on a page like this and in this case, all <button>

elements will have the same width, height and color and have rounded corners:

1 button2 {3 width : 100px ;4 he ight : 40 px ;5 background : rgba (230 ,132 ,0 , 0 ) ;6 c o l o r : rgba (230 ,230 ,230 , 0 . 89 ) ;7 border−rad iu s : 15px ;8 border−c o l o r : rgba (230 ,230 ,230 , 0 . 24 ) ;9 }

4.3.2 The id selector

The id selector uses the id attribute of an HTML element to select a specific element.

16

The id of an element should be unique within a page, so the id selector is used to select oneunique element!To select an element with a specific id, write a hash (#) character, followed by theid of the element.

The style rule below will be applied to the HTML element with id="academic_title":

1 #academic_t i t l e2 {3 width :650 px ;4 font−s i z e : 1 . 5cm;5 c o l o r : rgba (251 ,251 ,255 , 0 . 99 ) ;6 text−a l i g n : c en t e r ;7 font−f ami ly : "Bookman Old Sty l e " ;8 }

4.3.3 The class selector

The class selector selects elements with a specific class attribute.To select elements with a specific class, write a period (.) character, followed by the name

of the class.In the example below, all HTML elements with class="header" will have the samemargin,font and color and be center-aligned:

1 . header {2 text−a l i g n : c en t e r ;3 margin−top : 10px ;4 margin−bottom : 10px ;5 font−f ami ly : "Bookman Old Sty l e " ;6 font−s i z e : 0 . 8cm;7 c o l o r : rgba (255 ,252 ,255 , 0 . 84 ) ;8 }

4.4 Flat Design

4.4.1 Concept

Flat design is a style of interface design emphasizing minimum use of stylistic elements thatgive the illusion of three dimensions (such as the use of drop shadows, gradients or textures) andis focused on a minimalist use of simple elements, typography and flat colors. It makes it easierto design an interface that is responsive to changes in browser size across different devices. Withminimal design elements, websites are able to load faster and resize easily, and still look sharp onhigh-definition screens. As a design approach, it is often contrasted to skeuomorphism and richdesign, although flat design can use skeuomorphs just as much as a realistically designed UI. TheiOS is the firse operating system adopting flat design.

17

So, we apply this concept to our websites too.

4.4.2 Gallery

18

4.4.3 Features

Less animation: to make the pages flat, we give up many fancy animations to make it clearso that users won’t be confused by them.

Shape of elements: we make most of the elements rounded rectangles, which is a typical featureof flat design.

Compose: for the websites are simple, composing is a quite important part of it. We mainlyuse tables to show the results. When there are some graphs, we put it to the other side in a singlecolumn, so users can view the results and have a direct impression through the graphs at the sametime.

Color and fonts: to make the page simple and eye-friendly, we make most elements transparentwith white letters. As to the fonts, we pick a vintage and simple one, Bookman Old Style. Imaginehow awkward it would be to put flourish fonts in a flat page.

To conclude, our goal is to make the user interface clear, simple and elegant.

19

final project report - cs.sjtu.edu.cn

Documents