Bioinformatics Programming

1. Bioinformatics Programming EE, NCKU Tien-Hao Chang (Darby Chang)

2. Outline • HTML (HyperText Markup Language) • CSS (Cascading Style Sheets) • Javascript • CGI (Common Gateway Interface)

3. HTML • Determine the layout of a web page • What is a layout • it describes the structure of a document rather than the rendering details • e.g., a Word document

4. CSS • Specify the styles, i.e., the rendering details • For example, if you want a red headline • old way (specifying styles via HTML) • <h1 color="red">Red Headline</h1> • what if there are two headlines? • new way (via CSS) • <link type="text/css" href="main.css" /> • h1 { color: red; }

5. The best way? • This is an energetic field • HTML3, CSS1  HTML4, XHTML1, CSS2  HTML5, CSS3 • HTML5 + CSS3 • web 2.0 • gradient, round box, text shadow… • In the near future, developing web applications will be much easier than it is right now • of course, the demands from clients will increase, too (fast, dynamic, animation…) • http://webdev.stephband.info/parallax.html

6. XHTML1 • <h1>Red Headline</h1> • <link type="text/css" href="main.css" /> • Define how to write a correct document • Word is a WYSIWYG editor so that you do not need to (and can not) know the format of a .doc file • Define what elements/tags you can use • paragraph <p>text…</p> • line break <br /> • ordered list <ol><li>text…</li>…</ol> • unordered list <ul><li>text…</li>…</ul>

7. Block vs. inline element • What if we want to make some text bold/italic? • <b>text…</b>,<i>text…</i> • <strong>text…</strong>,<em>text…</em> • which is better? • In general, block elements consume the width as wider as possible; while inline elements are ‘inline’ • with CSS, this should be the only thing you should keep in mind to reasonably use HTML • Understand why you choose a specific tag • there should be always only a (or at most a few) correct tag for your need, which is both semantically and logically sound

8. Images and tables • Images • <imgsrc="…" /> • Tables • <table> <tr><td>text…</td>…</tr> <tr><td>text…</td>…</tr> …</table> • if you have ‘merged’ table cells • rowspan • colspan • what a hateful table syntax, just memorize it • Note that images are inline and tables are block elements, this convention could be also observed (though it is implicit) in Word

9. CSS2 • h1 { color: red; } • Define what properties you can use • element { property-name: property-value; property-name: property-value; …} • background-color, color… • font-family, font-size, font-style, font-weight… • text-align, text-decoration… • http://www.w3schools.com/css/ • Define how to specify HTML elements to apply • a { color: red; }h1 a { color: black;} • what if we want to change the colors of a specific link? • #element_id { color: red; } • what if we want to change the colors of a groups of links? • .element_class { color: red; } • combining them becomes powerful, but harder to be familiar with • p.element_class a { color: red; }

10. CSS specificity • http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/ • http://css-tricks.com/specifics-on-css-specificity/ • http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

11. http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpghttp://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

12. http://css-tricks.com/wp-content/csstricks-uploads/cssspecificity-calc-1.pnghttp://css-tricks.com/wp-content/csstricks-uploads/cssspecificity-calc-1.png

13. Box model http://www.guistuff.com/css/images/boxmodel.png

14. http://www.w3.org/TR/css3-box/box-intro.png

15. Box model • http://spyrestudios.com/css-in-depth-margins-padding-the-box-model/ • http://www.w3.org/TR/css3-box/ • http://www.w3.org/TR/CSS2/box.html

16. Float and positioning • If you understand HTML block/inline element and CSS float/positioning, then you can create any layout you have seen on the internet (theoretically, maybe a some creativity) • http://www.csszengarden.com/ • Something that neighbor block nor inline element is column, which is a commonly used layout • #sidebar { float: left; width: 100px; } • What if we want an element on an exactly position? • #element_id { position: absolute; left: 100px; top 100px; } • In general, a non-floating element is positioned according to a normal flow (the concept of block/inline elements), where the element’s position is ‘relative’ to its parent element • #element _id { position: relative; left: 100px; top 100px; } • There is a third positioning with which you can ‘nail’ elements on screen • #element _id { position: fixed; left: 100px; top 100px; }

17. http://spyrestudios.com/css-in-depth-floats-positions/ • http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

18. CSS summary • Selector and specificity • Box model • Float and positioning • that’s why block/inline concept should be the only thing you should keep in mind to reasonably use HTML with CSS

19. Javascript • Define variables pointing to some elements • Change their properties • Yes, it looks like dynamic CSS • In the past, to select a HTML element, or DOM (Document Object Model) the formal name, is very diffcult • Now we have jQuery, which makes us to ‘query’ DOM elements with CSS syntax • varobj=$('p.element_class a');obj.css( { 'background-color': 'red', 'color': 'white' } ); • Javascript code, especially using jQuery, is a little hard to read because of its flexibility • http://jquery.com/

20. CGI • Javascript is interpreted by browsers. Image that implementing a PSI-BLAST in Javascript… • So we need to perform tasks on the server, which requires some rules (though people making rules just want the leading role and money, they do have contributions) • HTML form • how data is packed via HTTP • how data is returned via HTTP (simply HTTP, since HTTP originally defines how to transfer data from server to client) • The later two are CGI (Common Gateway Interface)

21. Most details of CGI are taken care by the web server such as Apache or IIS, so what we need to know is how the web server calls our CGI program • In Perl, use the CGI module to read the data • use CGI;my $cgi = new CGI; # Perl can do OOmy $seq=$cgi->param('seq'); • In any CGI program, the standard output is a instant HTML document that the web server will send to the browser • The client will not know if a page is a static HTML file on the server or a CGI program’s output running on the server • print "Content-Type: text/html\n\n"; # HTTPprint "<p>Hello World!</p>\n";

22. Input of your project In null Out a web application Requirement - provide input fields according to your final project - prints the users’ inputs proteins - teamwork report Bonus - beautify it with CSS and even Javascript

23. Deadline 2010/5/25 23:59 Zip your code, step-by-step README and anything worthy extra credit. Email to darby@ee.ncku.edu.tw.