Προγραμματισμός Παγκόσμιου Ιστού

Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 1 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 20 Φεβρουαρίου 2017

Σημερινή διάλεξη Εισαγωγή Στοιχεία μαθήματος Τυπικά θέματα Διαδικτυακή αρχιτεκτονική / μοντέλο client-server HTML / HTML5 Δημιουργία δομών περιεχομένου Tags, elements, attributes Εισαγωγή στην HTML5 References και σύνταξη Νέα elements Έλεγχος ορθότητας δομής Λίστες, σύνδεσμοι, πίνακες Φόρμες Favicon

Συμμετοχή & συνεργασία

Στοιχεία μαθήματος (1/2) Σκοπός Παρουσίαση θεωρίας, σχεδιασμού και υλοποίησης Κατανόηση βασικών προβλημάτων Εξοικείωση με τεχνολογίες λειτουργίας και προγραμματισμού δικτυακών εφαρμογών Προγραμματισμός για τον Πελάτη (Client-Side) HTML5 (Γλώσσα λογικής οργάνωσης περιεχομένου εγγράφων) CSS3 (Γλώσσα ορισμού ιδιοτήτων Γροβολής περιεχομένου εγγράφων) Javascipt (ECMAScript) Γλώσσα δυναμικού χειρισμού περιεχομένων Προγραμματισμός για τον Διακομιστή (Server-Side) ΡΗΡ +MySQL Node JS (Server-Side Javascript)

Στοιχεία μαθήματος (2/2) (Online) εργαλεία για τη δημιουργία σελίδων και εφαρμογών Notepad++, Dabblet, Thimble, c9.io, Θεωρητικό ή εργαστηριακό μάθημα? Συνδυασμός διαλέξεων και εργαστηρίων Διάφορα on-line tutorials www.w3schools.com

Θεματικές ενότητες (1/2) HyperText Markup Language Κύρια γλώσσα παρουσίασης στο WWW Markup Ενσωματωμένοι «κωδικοί» στα αρχεία/σελίδες Οι κωδικοί ονομάζονται «tags» Hypertext Περιγράφουν τη δομή των αρχείων/σελίδων Περιέχουν οδηγίες για την επεξεργασία των αρχείων/σελίδων από τους browser Σύνδεσμοι σε άλλα έγγραφα/τοποθεσίες Specifications από το World Wide Web Consortium (W3C) HTML 4.01 HTML 5 (διαχείριση σφαλμάτων, εισαγωγή στοιχείων Flash και Javascript, π.χ. <canvas>, <video>, <audio>) - www.w3.org/tr/html5-diff XHTML (extensible HTML: αυστηρότεροι συντακτικοί κανόνες)

Θεματικές ενότητες (2/2) Cascading Style Sheets (CSS) Καθορίζει την εμφάνιση του περιεχομένου Javascript Προσθήκη διαδραστικότητας και συμπεριφοράς (π.χ. «μνήμη» για την επόμενη επίσκεψη) Διαχείριση στοιχείων σελίδας και λειτουργιών browser PHP & MySQL Scripting γλώσσα για τη δημιουργία δικτυακών εφαρμογών (μπορεί να ενσωματωθεί στην HTML) Node.js Server-side JavaScript που επιτρέπει την εκτέλεση εφαρμογών (runtime environment)

Εξαμηνιαίες εργασίες

Τυπικά θέματα Πρόγραμμα Διαλέξεις: Αίθουσα 101 (Δευτέρα 15:15) Εργαστηριακά μαθήματα: Προαιρετικά με υποχρεωτικές εργασίες (7 γραπτό + 4 εργασίες) Εργαστήρια: Κτ. Ανδρούτσου (Ανακοίνωση για ημέρα / ώρα) Υλικό Μαθήματος Σημειώσεις Βιβλιογραφία J. Ρ. Deitel, Η. Μ. Deitel (2011): Προγραμματισμός Internet και World Wide Web (Εκδόσεις Μ. Γκιούρδας) L. Ullman (2009): Εισαγωγή στις ΡΗΡ 6, MYSQL 5 με εικόνες (Εκδόσεις Κλειδάριθμος) R. Connoly, R. Hoar (2014): Προγραμματισμός για το Web (Εκδόσεις Μ. Γκιούρδας) Απορίες - Συναντήσεις Ηλεκτρονική διεύθυνση dimos@unipi.gr Γραφείο (Παρασκευή 12.00-14.00) Γρ. Λαμπράκη 126, Γραφείο 503

Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική Διεπαφή Client Database Server PowerBuilder Visual Basic Visual C++ Access Paradox Oracle Sybase Informix MS SQLServer Ethernet Token Ring TCP/IP

Μοντέλο client server Client side Sever side 1. Request 3. Response 2. Data

Μεταφορά εφαρμογών στο server Φυσική αρχιτεκτονική Web Browser HTTP Web Server Application Server Data base HTML Pages Τεχνική αρχιτεκτονική Any Computer Any Network Server

Δημιουργία διεπαφών Διαδικασία / βήματα δημιουργίας Σύνταξη περιεχομένου Προσθήκη πολυμέσων (π.χ. εικόνα) Καθορισμός δομής (HTML5 elements) Καθορισμός παρουσίασης (CSS3)

HTML Documents Ένα HTML αρχείο αποτελείται από τα δεδομένα (κείμενο, εικόνες, σύνδεσμοι κλπ) τις οδηγίες προς τους HTML Viewers (browsers) που αφορούν την παρουσίαση τους Το HTML κείμενο «μαρκάρεται» ορίζοντας συγκεκριμένο φορμάρισμα για κάθε του τμήμα Βασικός σκελετός <!DOCTYPE html> <html> <head> </html> </head> <body> </body> <title> A Basic Document Template </title> Body Element

Δημιουργία δομών περιεχομένου (1/2) Χρήση div και span tags για δημιουργία δομών (τμημάτων / περιοχών) με διαφορετικά χαρακτηριστικά Περιεχομένου Δομής Παρουσίασης Παρατηρήσεις Div: block-level element Span: inline element <div align= left >My text here </div>

Δημιουργία δομών περιεχομένου (2/2) Τα div και span έχουν συγκεκριμένα attributes (casesensitive) class: μπορεί να είναι και το ίδιο id: μοναδικό Χρησιμοποιούνται για να προσδιορίσουν ιδιότητες στις δομές όπου εφαρμόζονται <div id= header >..</div> <div id= main >..</div> <div id= footer >..</div>

Χωρισμός κειμένου σε παραγράφους Η εμφάνιση του κειμένου καθορίζεται από τον browser Οι αλλαγές γραμμών του αρχικού κειμένου αγνοούνται Πώς γίνεται ο χωρισμός παραγράφων; Με τα paragraph elements Στην αρχή της παραγράφου τοποθετείται ένα αρχικό paragraph tag <p> Στο πέρας της τοποθετείται το τελικό </p> Μπορούμε να χωρίσουμε μια γραμμή σε συγκεκριμένο σημείο; Ναι, με το line break tag <br> ή πιο σωστά σε XHTML <br />

Περίγραμμα Κειμένου Χωρισμός σε λογικές ενότητες Επικεφαλίδες (build-in stylesheet!) Υπάρχουν 6 επίπεδα: h1, h2, h3, h4, h5, h6 Δεν υπάρχει σταθερή εμφάνιση για όλους τους browsers Ο μικρότερος δείκτης φανερώνει μεγαλύτερη σπουδαιότητα

HTML Tags Είναι ανεξάρτητα στοιχεία μέσα σε < > <title>hello HTML</title>. <h2>κεφαλίδα επιπέδου 2</h2> Κατά την παρουσίαση του εγγράφου δεν φαίνονται Πώς εμφανίζονται τα < και >? < < > > Όλα τα special characters: www.w3schools.com/tags/ref_entities.asp

HTML Elements Τα HTML Elements διακρίνονται σε 2 κατηγορίες: Elements που ξεκινάνε με start/opening tag π.χ. <head> περιέχουν πληροφορία και τελειώνουν με end/closing tag π.χ. </head> Elements που δεν έχουν περιεχόμενο και τελειώνουν στο start tag π.χ. <br />, <hr />

Element Attributes Σε κάθε element μπορούμε να καθορίσουμε τις ιδιότητές του, που έχουν τη μορφή: όνομα ιδιότητας = τιμή ιδιότητας <element attribute-name= value >Content</element> <element attribute-name= value /> Παράδειγμα <img src= logo.jpeg alt= University of Piraeus logo >

Σύνοψη και παρατηρήσεις Markup Τα tags που περιλαμβάνουν το περιεχόμενο Element Περιεχόμενο + markup Attribute Ιδιότητα element Προσθήκη σχολίων  Χρήση πάντα / (slash) - ποτέ \ (backslash)!!

Εισαγωγή στην HTML5 Απευθύνεται σε προγραμματιστές και όχι απλά σε σχεδιαστές σελίδων Ενημερώνει τον browser για τη διαχείριση σφαλμάτων (στο παρελθόν η διαχείριση γινόταν από τους browsers) Δεν απαιτείται πάντα η χρήση JavaScript και plugins όπως Flash Παρέχει APIs για σχεδίαση, drag and drop, αποθήκευση, αναπαραγωγή video, μηνύματα από σελίδα σε σελίδα, ειδοποιήσεις, web sockets, geolocation, ιστορικότητα, κλπ

Βασική δομή σελίδας Νέα Elements <header> <nav> <article> <aside> <section> <section> <section> <footer>

References και σύνταξη στην HTML5 Charset XHTML: <meta http-equiv= Content-Type content= text/html ; charset=utf-8 > HTML5: <meta charset= utf-8 /> Javascript XHTML: <script type= text/javascript src= myscript.js > </script> HTML5: <script src= myscript.js ></script> CSS XHTML: <link rel= stylesheet type= text/css href= mystyles.css /> HTML5: <link rel= stylesheet href= mystyles.css /> Σύνταξη Κεφαλαία, μικρά, συνδυασμό Χρήση ή μη των quotation marks Για τα κενά elements, δεν απαιτείται το closing element Παραδείγματα: <link rel= stylesheet href= mystyles.css /> <LINK REL= STYLESHEET HREF= MYSTYLES.CSS /> <link rel= stylesheet href=mystyles.css>

Νέα elements στην HTML5 To 2005 η Google ανέλυσε περισσότερες από 1 δισεκατομμύριο σελίδες για τον προσδιορισμό των κλάσεων που χρησιμοποιούνται. Βάσει αυτού προτάθηκαν νέα elements στην HTML5 footer menu Title Small Text Content Header Nav Copyright Button Main Search Msonormal Date Smalltext Body Style1 Top White link

Header element Οι περισσότερες σελίδες έχουν στην αρχή τους λογότυπο, όνομα, αντικείμενα πλοήγησης Συχνά υπάρχουν αντικείμενα για την εύρεση πληροφορίας ή πίνακας περιεχομένων To specification ορίζει ότι το header element μπορεί να περιλαμβάνει στοιχεία πλοήγησης, αλλά είναι πιθανό αυτά τα στοιχεία να είναι και εκτός του <header> Το header element δε χρειάζεται να είναι ένα ανά σελίδα και δεν απαιτείται να είναι στην αρχή της Δεν γίνεται να τοποθετηθεί το <header> μέσα στα <footer>, <address>, ή άλλα <header>

Νav element Το <nav> element είναι για το περιεχόμενο πλοήγησης Χρησιμοποιείται για τη διασύνδεση με άλλες σελίδες ή διάφορα σημεία της ίδιας σελίδας Συνήθως χρησιμοποιείται μια unordered list για τα διάφορα σημεία του ιστότοπου <nav> <ul> <li><a href= # >Home</a> </li> <li><a href= # >Announcements</a> </li> <li><a href= # >About</a> </li> <li><a href= # >Contact</a> </li> </ul> </nav>

Article element To <article> και το <section> element είναι από τα βασικότερα νέα elements της HTML5 Το <article> αναφέρεται σε ένα ανεξάρτητο κομμάτι πληροφορίας Όπως το περιεχόμενο στο RSS feed (κάθε άρθρο είναι ανεξάρτητο)

Section element Το <section> αναφέρεται σε περιοχή περιεχομένου ή περιοχή της σελίδας που σχεδόν πάντα απαιτεί έναν τίτλο Χρησιμοποιείται για να ομαδοποιήσει ένα «κομμάτι» περιεχομένου, και μπορεί να διασπαστεί σε επιμέρους sections Δεν πρέπει να χρησιμοποιείται ως γενικός wrapper για «στυλιστικούς» λόγους (π.χ. <div>) Το <section> μπορεί να περιλαμβάνει <article> elements, και τα <article> elements μπορούν να έχουν πολλαπλά <section> elements

Aside element Το <aside> χρησιμοποιείται για περιεχόμενο που σχετίζεται με άλλη πληροφορία (π.χ. λίστα από κατηγορίες σε ένα blog, πρόσφατα σχόλια, κλπ) Σήμερα γίνεται συχνά χρήση sidebar σε ιστοσελίδες. Δε σημαίνει απαραίτητα ότι είναι σε κάποια πλευρά της σελίδας αλλά ότι σχετική πληροφορία Η σωστή του χρήση εξαρτάται από την τοποθεσία του Σε ένα άρθρο, θα πρέπει να περιλαμβάνει πληροφορία σχετική με το άρθρο π.χ. λεξικό Εκτός άρθρου, θα πρέπει να περιλαμβάνει πληροφορία σχετική με τη σελίδα π.χ. Twitter feed

Footer element Το <footer> βρίσκεται στο κάτω μέρος της σελίδας (αν και δε συμβαίνει πάντα) Χρησιμοποιείται για πληροφορία αναφορικά με το συγκεκριμένο section (π.χ. συγγραφέας, copyright, ημερομηνία, κλπ) Παράδειγμα: <footer> <small> Copyright MJL 2012</small> </footer> Όπως και το <header>, το <footer> μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα Το <footer> μπορεί να περιλαμβάνεται σε ένα <article> element

Συνοπτικά <article> <body> <header> <nav> <section> <section> <aside> <footer> <article> <header> <nav> <section> <section> <aside> <footer>

Outliner για έλεγχο ορθότητας δομής Βάσει των νέων elements είναι εφικτή η ιεραρχική δομή του περιεχομένου Απαιτείται έλεγχος ορθής χρήσης headings και sections Google Chrome: http://code.google.com/p/h5o Επιτρέπει την παρουσίαση της πληροφορίας ως πίνακα περιεχομένων Δεν πρέπει να εμφανίζεται Untitled section/article. εκτός από τα elements nav και aside

Προβολή κειμένου σε Λίστες Κάθε λίστα αποτελείται από το αναγνωριστικό της και το List Item tag <li> Οι λίστες υποστηρίζουν εσωτερικά HTML στοιχεία και ιδιαίτερα Paragraph tags για τον διαχωρισμό του κειμένου Τύποι Ordered List Ξεκινάει με το <ol> tag και τελειώνει με το </ol> tag Για κάθε στοιχείο χρησιμοποιείται το <li> tag Unordered ή Bulleted List Χρησιμοποιούνται αντίστοιχα τα <ul>, </ul> tag Definition Lists Χρησιμοποιούνται για συνδυασμό description/term Τα αντίστοιχα tag είναι: <dl>, <dd> και <dt> Υπάρχουν επιπλέον attributes π.χ. <ol start= 7 >

Σύνδεσμοι - Links Attribute target καθορίζει εάν ο σύνδεσμος ανοίγει στην ίδια ή σε νέα σελίδα <a href= http://www.unipi.gr target= _blank >University of Piraeus</a> χρήση του ίδιου ονόματος ορίζει τη συγκεκριμένη σελίδα ως target για όλες τις νέες σελίδες Link σε συγκεκριμένα σημεία σελίδων <a href="#c4">see also Chapter 4</a> <h2><a id="c4">chapter 4</a></h2> ή <h2 id="c4">chapter 4</h2> Image Links <a href= http://mymaps.gr > <img src= map.gif alt= Map of Greece title= A Map /> </a>

Πίνακες Caption πίνακα <caption>table caption</caption> Συγχώνευση κελιών σε πίνακες Γραμμών - rowspan <tr> </tr> <tr> </tr> <tr> </tr> Στηλών - colspan <tr> </tr> <tr> </tr> <tr> </tr> <th>.. </th> <td rowspan="2">merged</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>.. </td> <th colspan="2">just 1 Heading</th> <td>.. </td> <td>.. </td>

Φόρμες (1/2) Βασικό στοιχείο αλληλεπίδρασης με τον χρήστη Κάθε φόρμα αποτελείται από έναν αριθμό πεδίων στα οποία ο χρήστης εισάγει πληροφορία ή κάνει μια επιλογή Υπάρχουν 3 τύποι tags για δημιουργία πεδίων <textarea> <select> <input> Μπορεί να τοποθετηθεί οιοσδήποτε αριθμός τέτοιων tags Μπορούμε να έχουμε οποιοδήποτε αριθμό φορμών σε μια σελίδα αλλά δεν επιτρέπεται το φώλιασμα μεταξύ τους

Φόρμες (2/2) Το tag form οριοθετεί την αρχή της φόρμας Ορίζει το script ή το URL στο οποίο αποστέλλονται τα εισαχθέντα δεδομένα και την μέθοδο μετάδοσης τους Δύο βασικά attributes Action: Ορίζει την URL που θα τα λάβει Method: Λαμβάνει δύο δυνατές τιμές Παράδειγμα post στέλνει όλη την πληροφορία χωριστά από την URL get συνδέει την πληροφορία στο τέλος της URL Ενδείκνυται η χρήση της πρώτης μεθόδου επειδή τα URLs έχουν συγκεκριμένο μήκος που δεν μπορούν να υπερβούν <form method="post" action="/cgi-bin/my_script">...</form>

<input> (1/4) Επιτρέπει διάφορες επιλογές εισόδου περιεχομένου Simple text fields text Password fields password Radio buttons radio Check boxes checkbox Submit buttons submit Reset buttons reset

<input> (2/4) Τα πιο κοινά attributes για το <input> tag είναι τα εξής: type ορίζει τον τύπο του input field name το όνομα για τα δεδομένα Υποχρεωτικό για όλους τους τύπους εκτός από τα submit και reset size μέγεθος του πεδίου σε πλήθος χαρακτήρων maxlength μέγιστο πλήθος χαρακτήρων value έχει διάφορες σημασίες text ή password field: το default κείμενο που παρουσιάζεται check box ή radio button: την τιμή που επιστρέφεται submit και reset buttons: το κείμενο που παρουσιάζεται checked καθιστά ένα check box ή radio button ενεργό

<input> (3/4) text Παρουσιάζει μια απλή γραμμή κειμένου Attributes: name, size, maxlength, value password Παρουσιάζει τους χαρακτήρες που πληκτρολογούνται ως bullets Attributes: name, size, maxlength, value checkbox Attributes: name, value, checked radio Αποτελεί μια πιο περίπλοκη εκδοχή του check box επιτρέποντας σε ένα μόνο στοιχείο από το σύνολο να επιλεγεί Η ομαδοποίηση γίνεται με χρήση του name attribute Attributes: name, value, checked

<input> (4/4) reset Απεικονίζεται ως push button το οποίο όταν πατηθεί επαναφέρει τα στοιχεία της φόρμας στην αρχική τους τιμή submit Απεικονίζεται ως push button το οποίο όταν πατηθεί στέλνει τα δεδομένα της φόρμας στον server Παράδειγμα <form> <input type="radio" name="choice" value="choice1" checked= checked"> Yes. <input type="radio" name="choice" <br> value="choice2"> No. <input type="submit" value="next"> <input type="reset"> </form>

Παράδειγμα Φόρμας με πίνακα <form> <table> <tr> <td>name:</td> <td><input type="text" name="name" size="50"></td> </tr> <tr> <td>e-mail:</td> <td><input type="text" name="email" size="50"></td> </tr> <tr> <td>street Address:</td> <td><input type="text" name="street1" size="30"></td> </tr> <tr> <td>city:</td> <td><input type="text" name="city" size="50"></td> </tr> </table> </form>

Παράδειγμα Φόρμας με λίστα <form> What are your three favorite books? <ol> <li><input type="text" name="1st" size="20"> <li><input type="text" name="2nd" size="20"> <li><input type="text" name="3nd" size="20"> </ol> </form>

Ομαδοποίηση σε φόρμες Ομαδοποίηση επιλογών σε αντικείμενα εισόδου fieldset Τίτλος ομαδοποίησης legend <fieldset> </fieldset> <legend>contact Information</legend> <ol> <li>first name: <input type="text" name="fname" /></li> <li>last name: <input type="text" name="lname" /></li> <li>email: <input type="text" name="email" /></li> </ol>

<textarea> Πεδίο για εισαγωγή πολλαπλών γραμμών κειμένου default: 4 γραμμές, 40 χαρακτήρες Υπάρχουν τα ακόλουθα attributes name ορίζει το όνομα και είναι απαραίτητο rows πλήθος γραμμών cols πλήθος στηλών default text το κείμενο που αρχικά παρουσιάζεται Όλα τα input fields (<textarea>, <select>, <input>) πρέπει να έχουν ένα attribute name

<select> Ομαδοποίηση επιλογών σε αντικείμενα επιλογής - optgroup Τίτλοι ομαδοποίησης label <select multiple name="network" size="6"> <optgroup label="ethernet"> <option value="ethernet"> Ethernet 4 <option selected ="selected" value="ethernet"> Ethernet 8 <option value="ethernet"> Ethernet 12 </optgroup> <optgroup label="token Ring"> <option value="token16"> Token Ring - 16mb <option value="token4"> Token Ring - 4mb </optgroup> <option value="localtalk"> LocalTalk <option value="other"> Other... </select>

Favicon Ένα μικρό εικονίδιο που εμφανίζεται δίπλα από τον τίτλο ή το URL της σελίδας Υλοποιείται ως εξής (μέσα στο head της σελίδας) <link rel="shortcut icon" href= http://www.tositemou.gr/toonomatiseikonas.ico" /> Συνήθως η εικόνα είναι τύπου ico και πρέπει να έχει μέγεθος 16x16 ή 32x32 pixel