ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML - ΣΥΝΕΧΕΙΑ

Παρουσίαση με θέμα: "ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML - ΣΥΝΕΧΕΙΑ"— Μεταγράφημα παρουσίασης:

1 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML - ΣΥΝΕΧΕΙΑ

2 Κατηγορίες Στοιχείων HTML
Block-level: τα στοιχεία εκείνα, τα οποία συμπεριλαμβάνουν inline στοιχεία και άλλα block-level στοιχεία. Κατά την στοιχειοθέτησή τους, τα περιεχόμενά τους ξεκινούν σε νέα γραμμή. Inline: τυπικά περιλαμβάνουν μόνο κείμενο και άλλα inline στοιχεία. Κατά την στοιχειοθέτησή τους, τα περιεχόμενά τους δεν ξεκινούν σε νέα γραμμή. Επιμέρους κατηγορίες στοιχείων: Generic Block-level Elements: ADDRESS, BLOCKQUOTE, CENTER (Centered block), DEL, DIV, H[1-6], HR, INS (Inserted text), ISINDEX (Input prompt), NOSCRIPT (Alternate script content), P, PRE Lists, Tables, Forms Special Inline Elements: A – Anchor, APPLET, BASEFONT, BDO, BR, FONT (Font change), IFRAME (Inline frame), IMG (Inline image), MAP (Image map), AREA (Image map region), OBJECT (Object), PARAM (Object parameter), Q (Short quotation), SCRIPT, SPAN, SUB, SUP

3 Κατηγορίες Στοιχείων HTML (συνέχεια)
Phrase Elements: ABBR – Abbreviation, ACRONYM, CITE, CODE, DEL (Deleted text), DFN (Defined term), EM, INS (Inserted text), KBD (Text to be input), SAMP (Sample output), STRONG (Strong emphasis), VAR (Variable). Font-style Elements: B, BIG, I, S (Strike-through text), SMALL (Small text), STRIKE (Strike-through text), TT (Teletype text), U (Underlined text). Frames FRAMESET – Frameset FRAME – Frame NOFRAMES - Frames alternate content

4 Ειδικοί Χαρακτήρες και Σχόλια
Ορισμένοι χαρακτήρες είναι «δεσμευμένοι» από την ΗΤΜL σαν χαρακτήρες οριοθέτησης ή σήμανσης. Για την εισαγωγή τους στο περιεχόμενο ενός αρχείου ΗΤΜL, χρησιμοποιούμε αντίστοιχες οντότητες: το "<" εισάγεται σαν οντότητα < το ">" σαν > το "&" σαν & το ‘“’ σαν " Με αντίστοιχο τρόπο εισάγονται και χαρακτήρες που δεν περιλαμβάνονται στο πληκτρολόγιο. Π.χ.: το copyright ("©") εισάγεται σαν ©. Αντί οντοτήτων, μπορούμε να εισαγάγουμε αριθμητικούς κώδικες που αντιστοιχούν στο code position του χαρακτήρα που θέλουμε να εισαγάγουμε, με βάση την κωδικοποίηση Unicode. Π.χ., το © για εισαγωγή του "©”. Τα σχόλια στην ΗΤΜL περικλείονται στους χαρακτήρες "<!—” και “-->”. Π.χ.: <!-- An example comment -->

5 Γενικά block-level στοιχεία HTML
ADDRESS - Address BLOCKQUOTE - Block quotation CENTER - Centered block DEL - Deleted text DIV - Generic block-level container H1, H2, H3, H4, H5, H6: επικεφαλίδες HR - Horizontal rule INS - Inserted text ISINDEX - Input prompt NOSCRIPT - Alternate script content P - Paragraph PRE - Preformatted text

6 <ADDRESS>...</ADDRESS>
Δέχεται τα κοινά (common) κατηγορήματα της ΗΤΜL Περιεχόμενα: Στην HTML 4.0 Strict: inline στοιχεία Στην HTML 4.0 Transitional: inline στοιχεία και P Περιλαμβάνεται στα στοιχεία: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Παρέχει πληροφορίες επαφών για ένα έγγραφο ή για τμήμα εγγράφου: όνομα συγγραφέα, διαχειριστή, υπερσυνδέσμους στην ιστοσελίδα του διαχειριστή, διεύθυνση κλπ. Δεν είναι κατάλληλος για την κωδικοποίηση και στοιχειοθέτηση ταχυδρομικών διευθύνσεων. <ADDRESS>Maintained by <A href=" Quinn</A><<A

7 Generic Block-level Container <DIV>...</DIV>
Κατηγορήματα (εκτός των κοινών): ALIGN=[ left | center | right | justify ] (horizontal alignment) Περιεχόμενα: Inline και block-level στοιχεία Περιέχεται σε APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Προσδιορίζει ένα γενικό σχήμα πλαισίωσης περιεχομένου, για τον καθορισμό από τον συγγραφέα του εγγράφου του style ή της γλώσσας ενός τμήματος περιεχομένου. Πολύ χρήσιμο σε συνδυασμό με τα κατηγορήματα CLASS, ID και LANG. Π.χ., ένας οδηγός πλοήγησης (navigation bar) μπορεί να πλαισιωθεί σε στοιχείο DIV και να καθοριστεί σαν CLASS=navbar, επιτρέποντας στον συγγραφέα της εφαρμογής να καθορίσει το style του οδηγού πλοήγησης σε διαφορετικά μέσα (π.χ. αφαίρεσή του όταν γίνεται εκτύπωση του εγγράφου). Το υποβαθμισμένο κατηγόρημα ALIGN ρυθμίζει την στοίχιση του περιεχομένου του DIV.

8 Οριζόντια γραμμή <ΗR>
Το «άδειο» στοιχείο HR χρησιμοποιείται για την εισαγωγή οριζοντίων γραμμών στο στοιχειοθετημένο υπερκείμενο HTML. Κατηγορήματα (εκτός των κοινών και των συμβάντων) ALIGN=[ left | center | right ] (horizontal alignment) NOSHADE (solid line) SIZE=Pixels (line height) WIDTH=Length (line width) Contents Empty Περιέχεται σε APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH Μπορεί να αντικατασταθεί από τις ιδιότητες border-bottom και border-top των Cascading Style Sheets. Π.χ., ο ακόλουθος κανόνας style προσδιορίζει ότι μια οριζόντια γραμμή ακολουθεί όλα τα στοιχεία DIV με CLASS=navbar: div.navbar { border-top: solid medium navy }

9 Παράγραφοι στην HTML: <P>...</P>
Ορίζει μια παράγραφο. Ο καταληκτικός σημαντήρας είναι προαιρετικός, αλλά η χρήση του συνιστάται για την αποφυγή σφαλμάτων των πλοηγών, όταν γίνεται χρήση style sheets. Δεν μπορεί να περιλαμβάνει block-level στοιχεία όπως TABLE και ADDRESS. Κατηγορήματα (εκτός των συνηθισμένων): ALIGN=[ left | center | right | justify ] (horizontal alignment) Το κατηγόρημα ALIGN είναι υποβαθμισμένο (deprecated) και υποδηλώνει την οριζόντια στοίχιση του περιεχομένου της παραγράφου, με αποδεκτές τιμές: left, right, center, and justify. Τα Style sheets παρέχουν μεγαλύτερη ευελιξία για την στοίχιση παραγράφων. Περιέχει inline στοιχεία. Περιέχεται σε: ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

10 Επικεφαλίδες στην HTML (headings)
Ο αρχικός και τελικός σημαντήρας μιας επικεφαλίδας περικλείει το κείμενο της, το οποίο αναπαρίσταται στην οθόνη ενός φυλλομετρητή με γραμματοσειρά μεγαλύτερου μεγέθους και έντασης. Π.χ.: <h1>This is a heading</h1> <H2>This heading will be rendered with smaller fonts</H2>

11 Αλλαγή γραμμής στην HTML
Τα κενά, tabs και newlines δεν επηρεάζουν την στοιχειοθέτηση ενός υπερκειμένου HTML. Πολλαπλά κενά, tabs και newlines συμπτύσσονται σε ένα κενό από τους περισσότερους φυλλομετρητές. Για παράδειγμα, μιά σειρά από newlines σε αρχείο HTML δεν αναπαρίσταται σαν σειρά από newlines στην οθόνη ενός φυλλομετρητή. Αν δύο ή περισσότεροι σημαντήρες HTML έπονται ο ένας του άλλου σε κάποιο κείμενο και η χρήση τους προδικάζει την εισαγωγή κενού χώρου στο στοιχειοθετημένο κείμενο, τότε, κατά την στοιχειοθέτηση, γίνεται εισαγωγή κενών σαν να υπήρχε ένας μόνο τέτοιος σημαντήρας. <ΒR>: Ο σημαντήρας <BR> επιτάσσει την αλλαγή γραμμής στο σημείο στο οποίο τοποθετείται. Ο σημαντήρας αυτός είναι «άδειος».

12 Ο σημαντήρας PRE Η HTML δίνει τη δυνατότητα διατήρησης της στοιχειοθέτησης μιας ή περισσοτέρων παραγράφων κειμένου. Για τον σκοπό αυτό, το κείμενο περικλείεται από τον σημαντήρα <PRE> </PRE> (preformatted), ο οποίος διατηρεί την αρχική στοιχειοθέτηση του. Ο σημαντήρας <PRE> είναι χρήσιμος για την απεικόνιση πινάκων, την παρουσίαση προγραμματιστικού κώδικα, κλπ. Στο πεδίο του <PRE> δεν μπορούν να χρησιμοποιηθούν σημαντήρες στοιχειοθέτησης, όπως <P>, <ADDRESS>, <H?>, <BR>. Καλό είναι να αποφεύγεται το tab, αφού διαφορετικοί φυλλομετρητές αντιστοιχίζουν διαφορετικό αριθμό κενών χαρακτήρων στο tab. Δεν επιτρέπεται η χρήση των χαρακτήρων ελέγχου: “>”, “<”και “&”. Αντί αυτών χρησιμοποιούνται τα αντίστοιχα escape sequences (&lt κλπ) Στο πεδίο του <PRE> μπορεί να χρησιμοποιηθούν σημαντήρες για την υλοποίηση υπερσυνδέσμων και σημαντήρες έμφασης.

13 Στοιχείο Blockquote <BLOCKQUOTE> </BLOCKQUOTE>
Ο σημαντήρας αυτός χρησιμεύει για την εισαγωγή αναφορών (quotations) εκτεταμένου μεγέθους, με τρόπο ώστε να ξεχωρίζουν από το υπόλοιπο στοιχειοθετημένο υπερκείμενο. Η στοιχειοθέτηση του πεδίου του BLOCKQUOTE προβλέπει συνήθως αυξημένα περιθώρια.

14 Λίστες στην HTML DIR - Directory list DL - Definition list
DT - Definition term DD - Definition description LI - List item MENU - Menu list OL - Ordered list UL - Unordered list

15 Λίστες στην HTML Η HTML υποστηρίζει καταλόγους (λίστες) κουκκίδων (bulleted lists), με αρίθμηση και καταλόγους ορισμών (definition lists). <UL>...</UL> Σημαντήρας μη αριθμημένου καταλόγου <OL>...</OL> Σημαντηρας αριθμημένου καταλόγου Το πεδίο κάθε καταλόγου HTML δεν μπορεί να είναι κενό. Περιέχει τουλάχιστον ένα στοιχείο καταλόγου, το οποίο ορίζεται με τον σημαντήρα <LI>. Ο σημαντήρας <LI> είναι άδειος, δηλαδή δεν χρησιμοποιείται μαζί με καταληκτικό σημαντήρα </LI>. Δεν πρέπει να υπάρχουν κενά μεταξύ του <LI> και του κειμένου που το ακολουθεί, διότι έτσι δημιουργούνται προβλήματα στην στοιχειοθέτηση καταλόγων.

16 Λίστες στην HTML(συνέχεια)
<DL> </DL> Σημαντήρας καταλόγου ορισμών. Κάθε στοιχείο των καταλόγων αυτής της μορφής περιλαμβάνει δύο υποστοιχεία, που ορίζονται αντίστοιχα από τους σημαντήρες <DT> </DT> και <DD> </DD>. <DT> </DT> : όρος προς επεξήγηση (definition term) <DD> </DD> : επεξήγηση του όρου Ο σημαντήρας <DL> δέχεται το ιδιοστοιχείο COMPACT, που χρησιμοποιείται όταν οι προς επεξήγηση όροι είναι πολύ σύντομοι. Οι κατάλογοι της HTML μπορεί να είναι φωλιασμένοι (nested), ώστε στοιχείο ενός καταλόγου να είναι άλλος κατάλογος.

17 Πίνακες HTML 4.0 Οπισθοδρομική συμβατότητα με HTML3.2. Το μόνο σύνολο στοιχείων της HTML 4.0, το οποίο περιέχει ακόμη κατηγορήματα μορφοτύπησης χωρίς να έχει υποβιβασθεί (deprecated). Η τρέχουσα έκδοση της style γλώσσας που χρησιμοποιείται για μορφοτύπηση, CSS1, δεν περιλαμβάνει στοιχεία μορφοτύπησης πινάκων. Γραμματική: <!ELEMENT TABLE - - (CAPTION?, (COL* | COLGROUP*), THEAD?, TFOOT?, TBODY+) > <!ELEMENT TBODY (TR)+> <!ELEMENT TR (TH|TD)+> <!ELEMENT (TH|TD) (%FLOW;)* >

18 Πίνακες HTML (συνέχεια)
Χρησιμοποιούνται συχνά σαν μέσο στοίχισης πληροφοριών, αλλά η πρακτική αυτή πρέπει να αποφεύγεται. Οι πίνακες δημιουργούν προβλήματα σε χρήστες με στενότερα παράθυρα πλοηγού, με μεγαλύτερες γραμματοσειρές, με μη-visual πλοηγούς. Οι τρέχοντες πλοηγοί δεν εμφανίζουν έναν πίνακα μέχρις ότου όλα τα στοιχεία του έχουν φορτωθεί στο σύστημα του πελάτη. Αυτό έχει αρνητικές συνέπειες όταν ένα ολόκληρο έγγραφο έχει τοποθετηθεί μέσα σε πίνακα. Αντί των πινάκων για στοίχιση οι συγγραφείς πρέπει να χρησιμοποιούν style sheets.

19 Πίνακες HTML (συνέχεια)
Το στοιχείο TABLE καθορίζει έναν πίνακα για πολυδιάστατα δεδομένα τακτοποιημένα σε γραμμές και στήλες. Περιεχόμενα: προαιρετικό στοιχείο CAPTION, ακολουθούμενο από μηδέν ή περισσότερα στοιχεία COL και COLGROUP, ακολουθούμενα από προαιρετικά στοιχεία THEAD, TFOOT και από ένα ή περισσότερα TBODY. Περιλαμβάνεται στα στοιχεία: APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

20 Πίνακες HTML (συνέχεια)
TABLE - Table CAPTION - Table caption COLGROUP - Table column group COL - Table column THEAD - Table head TFOOT - Table foot TBODY - Table body TR - Table row TD - Table data cell TH - Table header cell

21 Στοιχείο TABLE Συντακτικό: <TABLE>...</TABLE> Κατηγορήματα (εκτός από τα συνήθη): SUMMARY=Text (purpose/structure of table) BORDER=Pixels (προαιρετικό): υπαγορεύει την ύπαρξη περιγράμματος γύρω από τις κυψελλίδες (cells) ενός πίνακα. Με την ανάθεση ενός ακεραίου στο ιδιοστοιχείο BORDER, καθορίζεται το πάχος των γραμμών του εξωτερικού περιγράμματος του πίνακα. Π.χ. BORDER=4. CELLPADDING=Length (προαιρετικό): καθορίζεται ο αριθμός των εικονοστοιχείων που μεσολαβούν μεταξύ του περιγράμματος των κυψελλίδων και των περιεχομένων τους. CELLSPACING=Length (προαιρετικό): καθορίζει την απόσταση (οριζόντια και κατακόρυφα) που διαχωρίζει τις κυψελλίδες μεταξύ τους, σε αριθμό εικονοστοιχείων. WIDTH=Length ή "n%" (προαιρετικό): καθορίζει το επιθυμητό πλάτος του πίνακα. FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (outer border) RULES=[ none | groups | rows | cols | all ] (inner borders) ALIGN=[ left | center | right ] (table alignment) BGCOLOR=Color (table background color)

22 Υποχρεωτικά στοιχεία πινάκων
Σώμα του πίνακα (σημαντήρας TBODY προαιρετικός) Μία ή περισσότερες γραμμές (ΤR) Σε κάθε γραμμή, μία ή περισσότερες κυψελλίδες (TH ή TD). Οι σημαντήρες αυτοί συνοδεύονται από προαιρετικά κατηγορήματα που καθορίζουν την οριζόντια και κατακόρυφη στοίχιση των περιεχομένων τους.

23 Παράδειγμα πίνακα HTML
<TABLE> <TR><TH>Abbreviation</TH><TH>Long Form</TH> </TR> <TR><TD>AFAIK</TD><TD>As Far As I Know</TD> </TR> <TR><TD>IMHO</TD><TD>In My Humble Opinion</TD> </TR> <TR><TD>OTOH</TD><TD>On The Other Hand</TD></TR> </TABLE>

24 Προαιρετικά στοιχεία πινάκων
Το στοιχείο TABLE μπορεί να περιλαμβάνει έναν αριθμό από προαιρετικά στοιχεία για τον εμπλουτισμό της δομής του πίνακα. Το στοιχείο CAPTION προσθέτει μια λεζάντα στον πίνακα και ακολουθείται από τα προαιρετικά στοιχεία COL και COLGROUP, τα οποία καθορίζουν εύρος στηλών και ομαδοποιήσεις στηλών. Ακολουθούν τα THEAD, TFOOT και TBODY με ομάδες σειρών: τα προαιρετικά THEAD και TFOOT περιλαμβάνουν την πρώτη και την τελευταία σειρά αντίστοιχα. Σύμφωνα με την γραμματική του TABLE, το στοιχείο TFOOT προηγείται του TBODY. Συντακτικό: <!ELEMENT CAPTION (%INLINE;)*> <!ELEMENT THEAD (TR)+ > <!ELEMENT TFOOT (TR)+ > <!ELEMENT COLGROUP (COL)* > <!ELEMENT COL EMPTY >

25 Παράδειγμα πίνακα HTML
<TABLE> <CAPTION>Common Usenet Abbreviations</CAPTION> <THEAD> <TR><TH>Abbreviation</TH><TH>Long Form</TH></TR></THEAD> <TBODY> <TR><TD>AFAIK</TD><TD>As Far As I Know</TD></TR> <TR><TD>IMHO</TD><TD>In My Humble Opinion</TD></TR> <TR><TD>OTOH</TD><TD>On The Other Hand</TD></TR> </TBODY> </TABLE>

26 Στοιχείο COLGROUP: Ομάδες Στηλών
Την από κοινού μορφοτύπηση ομάδας στηλών Την διαφοροποίηση της μορφοτύπησης τού διαχωρισμού στηλών που ανήκουν στην ίδια ομάδα και στηλών που ανήκουν σε διαφορετικές ομάδες. Κατηγορήματα COLGROUP: SPAN: καθορίζει τον αριθμό στηλών της ομάδας. WIDTH: καθορίζει το εύρος των στηλών της ομάδας. %CELLALIGN, %CELLVALIGN Συνήθη κατηγορήματα HTML

27 Στοιχείο COL Άδειο στοιχείο.
Χρησιμεύει για τον καθορισμό της στοίχισης (layout): Ομάδας στηλών (όταν χρησιμοποιείται από κοινού με το COLGROUP). Μεμονωμένων στηλών πίνακα. Κατηγορήματα: SPAN: αριθμός στηλών στους οποίους εκτείνεται ο ορισμός του COL. WIDTH: καθορίζει το εύρος των στηλών που χαρακτηρίζονται από το στοιχείο COL. Παράδειγμα: διαχωρισμός πίνακα σε τρεις ομάδες στηλών, η πρώτη μιας στήλης και οι επόμενες δύο τριών στηλών.

28 Παράδειγμα <TABLE SUMMARY="This table">
<COLGROUP><COLGROUP SPAN=3><COLGROUP SPAN=3> <THEAD> <TR> <TH ROWSPAN=2>Character</TH> <TH ROWSPAN=2>Entity</TH> <TH ROWSPAN=2>Decimal</TH> <TH ROWSPAN=2>Hex</TH> <TH COLSPAN=3>Rendering in Your Browser</TH> </TR> <TR><TH>Entity</TH><TH>Decimal</TH><TH>Hex</TH> </THEAD>

29 Παράδειγμα (συνέχεια)
<TBODY> <TR> <TD>non-breaking space</TD> <TD>&nbsp;</TD> <TD>&#160;</TD> <TD>&#xA0;</TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TBODY> </TABLE>

30 Στοιχειοθέτηση χαρακτήρων
Η HTML έχει δύο τρόπους στοιχειοθέτησης για χαρακτήρες και συμβολοσειρές: “Σημασιολογική” ή “Λογική” στοιχειοθέτηση: Χρησιμοποιούνται σημαντήρες που χαρακτηρίζουν σημασιολογικά κάποιο κομμάτι κειμένου (συμβολοσειρά) και η τελική μορφή της στοιχειοθέτησης αποφασίζεται από τον εκάστοτε φυλλομετρητή ο οποίος απεικονίζει το αντίστοιχο υπερκείμενο Π.χ. <EM>This text should be emphasized</EM> <STRONG>This text should be strongly emphasized</STRONG> “Μορφολογική” ή “Φυσική” στοιχειοθέτηση Χρησιμοποιούνται σημαντήρες οι οποίοι καθορίζουν την μορφή της στοιχειοθέτησης του πεδίου τους Π.χ. <B> για bold text, <I> για italics, <TT> για typewriter text

31 Σημαντήρες σημασιολογικής στοιχειοθέτησης
<DFN> </DFN> Για έναν όρο, για τον οποίο δίνεται ορισμός <EM> </EM> Για έμφαση, συνήθως το πεδίο του απεικονίζεται με πλάγιους χαρακτήρες (italics) <CITE> </CITE> Για τίτλους βιβλίων, ταινιών κλπ , συνήθως το πεδίο του απεικονίζεται με πλάγιους χαρακτήρες (italics) <CODE> </CODE> Για προγραμματιστικό κώδικα, απεικονίζεται με γραμματοσειρά σταθερού εύρους (fixed width) <KBD> </KBD> Για αναπαράσταση στοιχείων που έχουν εισαχθεί από το πληκτρολόγιο <STRONG> </STRONG> Για ισχυρή έμφαση <VAR> </VAR> Για απεικόνιση μεταβλητής

32 Ενσωμάτωση Εικόνων Ενσωμάτωση εικόνων σε αρχεία HTML (inline images): <IMG SRC="ucyp.gif"> Εξ ορισμού η εισαγόμενη εικόνα τοποθετείται ώστε η κάτω ακμή του περιβλήματός της να είναι ευθυγραμμισμένη με το κάτω μέρος των χαρακτήρων του υπερκειμένου. Στο πρότυπο HTML2 είναι δυνατή η διαφορετική ευθυγράμμιση μιας εικόνας, με χρήση του ιδιοστοιχείου (attribute) ALIGN: top, bottom, middle. Επίσης left, right στο ΗΤΜL 3. Π.χ.: <IMG SRC="ucyp.gif" ALIGN=middle> Διαδεδομένες κωδικοποιήσεις εικόνων: GIF, JPEG, XPM ή XBM (X-pixelmap).

33 Ενσωμάτωση Εικόνων Η χρήση του ιδιοστοιχείου ALT:
<IMG SRC="ucyp.gif" ALIGN=middle ALT="[UCY Logo]"> Για την ορθή στοιχειοθέτηση ενός υπερκειμένου με ενσωματωμένες εικόνες, ο φυλλομετρητής θα πρέπει να γνωρίζει το μέγεθος της κάθε εικόνας. Εν γένει, η πληροφορία αυτή δεν είναι γνωστή παρά μόνο μετά το “φόρτωμα” της εικόνας στον φυλλομετρητή. Επειδή αυτό το γεγονός εισάγει έναν επιπλέον παράγοντα καθυστέρησης στην ανάγνωση μιας ιστοσελίδας, η προδιαγραφή HTML3 προτείνει τη χρήση των ιδιοστοιχείων HEIGHT και WIDTH με τον σημαντήρα ΙΜG. Π.χ: <IMG SRC=“ucy.gif” HEIGHT=10 WIDTH=20 ALT=“[UCY Logo]” ALIGN=left>

34 Ιδιοστοιχεία HEIGHT και WIDTH
Η χρήση των ιδιοστοιχείων αυτών επιτρέπει σε έναν φυλλομετρητή να προχωρήσει στην στοιχειοθέτηση της ιστοσελίδας, διατηρώντας αρκετό χώρο για τις εικόνες. Αν η εικόνα που τελικά φορτωθεί δεν έχει το προκαθορισμένο μέγεθος, πολλοί φυλλομετρητές θα αναπροσαρμόσουν το μέγεθός της (scaling) με βάση τις τιμές των ιδιοστοιχείων HEIGHT και WIDTH. Οι τιμές των ιδιοστοιχείων HEIGHT και WIDTH αφορούν κατά συνθήκη σε pixels.

35 Μέγεθος Εικόνων Το φόρτωμα των εικόνων σε έναν πελάτη γίνεται μετά την παραλαβή από τον φυλλομετρητή του αρχείου HTML. Στη συνέχεια, ο φυλλομετρητής αναζητά τα στοιχεία IMG του υπερεγγράφου, για τα οποία στέλνει νέες αιτήσεις εξυπηρέτησης προς τον διαθέτη. Οι εκόνες που εισάγονται σε ένα υπερκείμενο δεν πρέπει να είναι πολύ μεγάλου μεγέθους. Διαφορετικά υπάρχει η πιθανότητα η πρόσβαση προς τις αντίστοιχες ιστοσελίδες να είναι πολύ αργή. Ιδανικά, το συνολικό μέγεθος των ενσωματωμένων εικόνων σε μιά ιστοσελίδα δεν πρέπει να ξεπερνά τα Kbytes.

36 Χρωματισμός Εικόνων Πριν την ενσωμάτωση μιας εικόνας, πρέπει να γίνεται επεξεργασία της ώστε αυτή να μην περιλαμβάνει πολλά διαφορετικά χρώματα. Αρκετοί φυλλομετρητές μπορούν να αναπαραστήσουν περιορισμένο αριθμό διαφορετικών χρωμάτων, μικρότερο από τα 256 χρώματα που μπορούν να αναπαρασταθούν σε μιά συνηθισμένη 8-μπιτη οθόνη. Για παράδειγμα, αν ένας φυλλομετρητής επιτρέπει το πολύ 50 διαφορετικά χρώματα σε κάθε εικόνα, έχει τη δυνατότητα αναπαράστασης (σε μια ιστοσελίδα) μέχρι 5 εικόνες με διαφορετικά χρώματα, πριν εξαντλήσει το όριο των 256 χρωμάτων. Πριν την ενσωμάτωση μιας εικόνας σε ιστοσελίδα, συνίσταται η επεξεργασία της για τον περιορισμό των διαφορετικών χρωμάτων που χρησιμοποιεί. Η επεξεργασία αυτή επιτρέπει και τον περιορισμό του μεγέθους της εικόνας.

37 Εξωτερικές εικόνες, ήχος και κινούμενα σχέδια
Εκτός από τη δυνατότητα ενσωμάτωσης εικόνων σε στοιχειοθετημένα αρχεία HTML (με χρήση του σημαντήρα IMG), υπάρχει η δυνατότητα εμφάνισης των εικόνων σε ξεχωριστή ιστοσελίδα, με χρήση του σημαντήρα HREF. Π.χ.: <A HREF=“image.gif”>Image anchor</A> <A HREF=“image.gif”><IMG SRC=“smallimage.gif”></A> Με παρόμοιο τρόπο μπορεί κανείς να εισαγάγει παραπομπές σε αρχεία κινουμένων σχεδίων, ήχου, κλπ.

38 Εικόνες Παρασκηνίου (background)
H ΗΤΜL δίνει τη δυνατότητα καθορισμού του παρασκηνίου (background) μιας ιστοσελίδας. Το παρασκήνιο μπορεί να αναπαριστά κάποια υφή (texture) - π.χ. λινό ύφασμα, λεία επιφάνεια - είτε να είναι συγκεκριμένη εικόνο (λογότυπος κλπ). Η εισαγωγή εικόνας σε gif, jpg γίνεται με χρήση ιδιοστοιχείου του σημαντήρα BODY: <BODY BACKGROUND="foo.gif"> Δεν είναι απαραίτητο η εικόνα που εισάγεται σε κάποιο παρασκήνιο να καλύπτει ολόκληρη την επιφάνειά του αφού οι πλείστοι φυλλο-μετρητές χρησιμοποιούν την διαδικασία πολλαπλής επικάλυψης επιφάνειας με την ίδια εικόνα (tiling).

39 Χρωματισμός κειμένου-παρασκηνίου
Κατά συνθήκη, οι φυλλομετρητές στοιχειοθετούν αρχεία HTML με χαρακτήρες σε χρώμα μαύρο και παρασκήνιο σε χρώμα άσπρο ή γκρί. Οι αφετηρίες υπερσυνδέσμων (άγκυρες) έχουν χρώμα μπλέ, ενώ μιά άγκυρα της οποίας έχουμε “αολουθήσει” τον υπερσύνδεσμό έχει χρώμα κόκκινο. Με τον καθορισμό των κατάλληλων ιδιοστοιχείων του σημαντήρα <BODY>, η ΗΤΜL επιτρέπει την αλλαγή των κατά συνθήκη χρωμάτων. Π.χ.: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC" VLINK="#970000"> Οι δεκαεξαδικοί αριθμοί που ανατίθενται στα ιδιοστοιχεία κωδικοποιούν χρώματα σε κλίμακα RGB.

40 Υπερσύνδεσμοι Οι υπερσύνδεσμοι στην HTML υλοποιούνται με τη χρήση των σημαντήρων παραπομπής <A>, </A>, οι οποίοι αποκαλούνται και άγκυρες. Το κείμενο που περικλείεται από τους σημαντήρες <Α>...</Α> αποτελεί την αφετηρία της παραπομπής και αποκαλείται άγκυρα υπερκειμένου (hypertext anchor). Στους περισσότερους φυλλομετρητές οι αφετηρίες των παραπομπών σημειώνονται με ξεχωριστό χρώμα και υπογράμμιση. <A HREF=" Science</A> <Α SRC="mbox.gif" ALIGN="middle" ALT="[ ]"></Α>

41 Υπερσύνδεσμοι Το ιδιοχαρακτηριστικό HREF ενός υπερσυνδέσμου καθορίζει τη διεύθυνση (URL) της παραπομπής. Η επιλογή μιάς αφετηρίας με το ποντίκι καθοδηγεί τον φυλλομετρητή να ζητήσει το αρχείο που καθορίζεται από το ιδιοχαρακτηριστικό HREF, χρησιμοποιώντας το πρωτόκολλο που ορίζεται από το URL.

42 Ενσωμάτωση παραπομπών στα υπερκείμενα
Η χρήση παραπομπών στα υπερκείμενα πρέπει να γίνεται με φειδώ και προσοχή για να αποφεύγονται φαινόμενα όπως ο δικτυακός αποπροσανατολισμός (network disorientation) και η δυσκολία ανάγνωσης του περιεχομένου. Εν γένει είναι προτιμότερο οι παραπομπές υπερκειμένων να ενυπάρχουν μέσα στη φυσική ροή του κειμένου ενός υπερκειμένου. Οι αφετηρίες των παραπομπών δεν πρέπει να έχουν πολύ μεγάλο μήκος. Η παρουσίαση συλλογών από παραπομπές καλύτερα να γίνεται με χρήση καταλόγων (lists) και όχι μέσα στην ίδια παράγραφο.

43 Τρόποι διασύνδεσης υπερκειμένων στην HTML
Σχετική: <A HREF="ex2b.html">hypertext links</A> <A HREF="Project/info.html">subdirectory</A> Απόλυτη: <A HREF=" Είναι προτιμότερη η χρήση ‘σχετικών‘ συνδέσμων διότι: είναι πιό εύκολη η μεταφορά ομάδας υπερκειμένων από έναν διαθέτη σε κάποιον άλλο (εφόσον διατηρείται η ιεραρχία των υπερκειμένων, αλλ‘ αλλάζει η διεύθυνσή τους) χρειάζεται λιγότερη δακτυλογράφηση Η χρήση ‘απολύτων’ υπερσυνδέσμων προτιμάται όταν διασυνδέονται υπερκείμενα που δεν συσχετίζονται άμεσα. Ãéáôß åßíáé ðéü ãñÞãïñåò ïé óõíäÝóåéò ìå ôïõò äéáèÝôåò üôáí ÷ñçóéìïðïéïýíôáé ó÷åôéêïß õðåñóýíäåóìïé;

44 Το ιδιοστοιχείο NAME του σημαντήρα <A>
Oι “απολήξεις” των υπερσυνδέσμων στην HTML στοχεύουν κατά συνθήκη είτε στην “κορυφή” αρχείου HTML είτε σε αρχείο άλλου μέσου (π.χ. εικόνας, ήχου κλπ). Η HTML μας δίνει τη δυνατότητα να καθορίζουμε σαν απολήξεις υπερσυνδέσμων αποσπάσματα κειμένου από το εσωτερικό αρχείων HTML, με χρήση του ιδιοστοιχείου NAME. Π.χ. στο εσωτερικό ενός αρχείου example.html μπορεί να υπάρχει το εξής: <Α ΝΑΜΕ="targ1">Chapter 1</Α> σε έγγραφο … Η τιμή (όνομα) που ανατίθεται στο ιδιοστοιχείο NAME (fragment identifier) καθορίζει μοναδικά το συγκεκριμένο σημείο του εγγράφου.

45 «Εσωτερικοί» Υπερσύνδεσμοι
Η HTML δίνει τη δυνατότητα διασύνδεσης μεταξύ διαφορετικών σημείων του ίδιου αρχείου με χρήση του ιδιοστοιχείου NAME με τον σημαντήρα Α (άγκυρα). Μέσω του ιδιοστοιχείου HREF μιάς άγκυρας, μπορεί κανείς να παραπέμψει στο ονοματοδοτημένο σημείο του εγγράφου. Π.χ., σε άλλο σημείο του αρχείου example.html μπορεί να υπάρξει η παραπομπή: See <Α HREF=“#targ1”>Chapter 1</A> Σε ένα άλλο αρχείο μπορούμε να εγγράψουμε έναν υπερσύνδεσμο κατευθείαν στο σημείο targ1 του αρχείου example.html. Π.χ.: <A HREF="boo.html#foo">Παραπομπή στο Ι</A> Υπάρχει η δυνατότητα συνδυασμού των ιδιοστοιχείων HREF και NAME μέσα σε μία σημαδούρα <Α>. Π.χ.: <A HREF="depthome.html" NAME="top">Home</A>

46 Φόρμες HTML Χρησιμοποιώντας τις φόρμες δίνεται η δυνατότητα γιά δημιουργία υπερεγγράφων με : κομβία επιλογής (checkboxes) κατακόρυφους πίνακες επιλογών (pull-down menus) παράθυρα για συμπλήρωση κειμένου πίνακες επιλογών Οι δυνατότητες αυτές μπορούν να χρησιμοποιηθούν για δημιουργία συστημάτων διασύνδεσης με Βάσεις Δεδομένων και γενικότερα για αλληλεπίδραση με τον χρήστη.

47 Φόρμες HTML (συνέχεια)
<FORM> ... </FORM> : Καθορίζει μία φόρμα εισόδου δεδομένων. Οι σημαντήρες <FORM> ... </FORM> δεν μπορούν να τεθούν εντός επικεφαλίδων (headings), εντός άλλης φόρμας, ή εντός σημαντήρων μορφοτύπησης κειμένων (π.χ. STRONG, EM). Ωστόσο οι σημαντήρες <FORM> μπορούν να περιλάβουν επικεφαλίδες ή σημαντήρες μορφοτύπησης χαρακτήρων. Κατηγορήματα: ACTION: το URL του προγράμματος του εξυπηρετητή στον οποίο θα αποσταλούν τα δεδομένα που θα συγκεντρωθούν από τη φόρμα, για περαιτέρω επεξεργασία. METHOD: είναι η μέθοδος που χρησιμοποιείται για την υποβολή της συμπληρωμένης φόρμας, σύμφωνα με το πρωτόκολλο HTTP/1.0. Η επιλογή μεθόδου εξαρτάται από τον εξυπηρετητή. Υπάρχουν οι ακόλουθες δυνατότητες: GET: κατά συνθήκη μέθοδος (default), συνεπάγεται την επί-θεση των περιεχομένων της φόρμας στο URL. POST: συνεπάγεται την αποστολή των περιεχομένων της φόρμας στον εξυπηρετητή μέσω μηνύματος HTTP.

48 Περιεχόμενα FORM Στοιχεία: INPUT SELECT TEXTAREA

49 Στοιχείο INPUT <INPUT>: Καθορίζει ένα απλό πεδίο εισροής (input). Είναι άδειος σημαντήρας και δεν περικλείει ο,τιδήποτε. ‘Εχει τα ακόλουθα ιδιοστοιχεία: TYPE: λαμβάνει τις τιμές : "text": πεδίο εισαγωγής χαρακτήρων-υπονοούμενη τιμή "password": σύνθημα (πεδίο εισαγωγής κειμένου) "checkbox": απλός διακόπτης ανοικτό/κλειστό "radio": απλός διακόπτης ανοικτό/κλειστό - περισσότεροι του ενός τέτοιοι διακόπτες συνδέονται μεταξύ τους και ένας μόνο μπορεί να είναι "ανοικτός" "submit": κουμπί αποστολής των περιεχομένων της φόρμας στο URL "reset": κουμπί σβυσίματος των διαφόρων στοιχείων που έχουν τυχόν εγγραφεί στη φόρμα.

50 Στοιχείο INPUT (συνέχεια)
NAME: συμβολικό όνομα για το αντίστοιχο πεδίο εισροής (input field). Πρέπει να χρησιμοποιείται σε όλους τους τύπους (types) εκτός των "submit" και "reset", αφού διαφοροποιεί τα δεδομένα που αντιστοιχούν σε διαφορετικά πεδία της ίδιας φόρμας. VALUE: καθορίζει τις προκαθρισμένες τιμές ενός πεδίου χαρακτήρων ή ενός πεδίου συνθήματος. Για τα πεδία checkbox ή radiobutton η κατά συνθήκη τιμή είναι "ανοικτό". Για τα πεδία "submit" ή "reset", το VALUE μπορεί να χρησιμοποιηθεί για την αλλαγή της επιγραφής πάνω στα αντίστοιχα κουμπιά. CHECKED: καθορίζει ότι τα πεδία checkbox ή radiobutton είναι ανοικτά. SIZE: το μήκος ενός πεδίου χαρακτήρων (κατά συνθήκη τιμή το 20). MAXLENGTH: ο μέγιστος επιτρεπόμενος αριθμός χαρακτήρων που γίνονται αποδεκτοί στην είσοδο (κατά συνθήκη τιμή απεριόριστη).

51 Στοιχείο SELECT Καθορίζει κατάλογο επιλογών.
<SELECT ΝΑΜΕ="a-menu"> <OPTION value=“first”> first <OPTION value=“second” SELECTED> second </SELECT> ‘Eχει τα ακόλουθα κατηγορήματα: NAME: το συμβολικό όνομα γιά το πεδίο επιλογής (υποχρεωτικό). MULTIPLE: εάν αυτό το κατηγόρημα είναι παρόν, τότε ο χρήστης μπορεί να επιλέξει περισσότερες της μίας επιλογές. SIZE: καθορίζει τον αριθμό των επιλογών που εμφανίζονται στην οθόνη. Η κατά συνθήκη τιμή είναι 1 και στην περίπτωση αυτή ο κατάλογος επιλογών αναπαρίσταται σαν κατακόρυφος πίνακας επιλογών (pull-down menu). <OPTION>: Καθορίζει ένα στοιχείο επιλογής σε κατάλογο επιλογών Κατηγόρημα SELECTED

52 Στοιχείο TEXTAREA <TEXTAREA> ... </TEXTAREA>: Καθορίζει παράθυρο εισροής κειμένου (text input) Ιδιοστοιχεία: NAME, ROWS, COLS

53 Παράδειγμα φόρμας ΗΤΜL
<FORM METHOD=POST ACTION=" Hello Everybody. Please give information. <P>Your Organization?<INPUT NAME="org" TYPE=text SIZE="48"> <P>Commercial? <INPUT NAME="commerce" TYPE=checkbox> How Many Users? <INPUT NAME="users" TYPE=int> <P>Which browser do you use most often? <SELECT NAME="browser"> <OPTION> Cello <OPTION> Lynx <OPTION> Netscape </SELECT> <P>A contact point for your site: <INPUT NAME="contact" SIZE="42"> <P><INPUT TYPE=submit> <INPUT TYPE=reset> </FORM>

54 Στοιχείο FRAMESET Νεώτερες εκδόσεις της HTML υποστηρίζουν ένα νέο τύπο υπερκειμένων, τα πλαίσια (frames), τα οποία ορίζονται απο τον σημαντήρα FRAMESET. Ο FRAMESET υποκαθιστά τον σημαντήρα BODY και καθορίζει τη μορφοτύπηση του παραθύρου του φυλλομετρητή σαν ένα σύνολο από πλαίσια (frames). ‘Ενα HTML αρχείο που χρησιμοποιεί το FRAMESET δεν μπορεί να περιλαμβάνει το BODY. Το FRAMESET μπορεί να περιλάβει τους ακόλουθους σημαντήρες: FRAME: καθορίζει τα περιεχόμενα ενός πλαισίου, δηλαδή το HTML αρχείο που εμφανίζεται στο αντίστοιχο πλαίσιο. Μιά νέα ιεραρχία πλαισίων, με τον σημαντήρα FRAMESET. Τον σημαντήρα NOFRAMES , ο οποίος καθορίζει ένα εναλλακτικό αρχείο HTML στην περίπτωση που ο φυλλομετρητής δεν αναγνωρίζει FRAMES. Η δομή και το μέγεθος των πλαισίων καθορίζονται από τα ιδιοστοιχεία του FRAMESET.

55 Κατηγορήματα FRAMESET
COLS: σημαίνει ότι τα πλαίσια είναι τοποθετημένα σε στήλες (κατακόρυφος διαχωρισμός του παραθύρου). Η τιμή που ανατίθεται στο COLS υποδηλοί τον αριθμό και το μέγεθος των πλαισίων. ROWS: σημαίνει ότι τα πλαίσια είναι τοποθετημένα σε γραμμές (οριζόντιος διαχωρισμός). Η τιμή που ανατίθεται στο COLS υποδηλοί τον αριθμό και το μέγεθος των πλαισίων. Η FRAMESET μπορεί να χρησιμοποιεί ένα μόνο από τα δύο ιδιοστοιχεία ROWS και COLS. Παράδειγμα: <FRAMESET ROWS = "80, 3*, *, 100"> <FRAMESET COLS="20%, 80%">

56 Στοιχείο FRAME Καθορίζει τις ιδιότητες του κάθε πλαισίου που ορίζεται σε ένα σύνολο πλαισίων (FRAMESET). ‘Εχει τα ακόλουθα ιδιοστοιχεία: MARGINWIDTH="n" (προαιρετικό), καθορίζει το έυρος σε εικονοστοιχεία (pixels) των αριστερών και δεξιών περιθωρίων του πλαισίου, που υπάρχουν ανάμεσα στο περιεχόμενο και στο «κάδρο» του πλαισίου. MARGINHEIGHT="n" (προαιρετικό): εύρος σε εικονοστοιχεία των άνω και κάτω περιθωρίων του πλαισίου. NAME="name_string" (προαιρετικό). NORESIZE SCROLLING="yes" ή "no" ή "auto" SRC="URL" (προαιρετικό).

57 Βασικές Αρχές Σχεδιασμού Οικοσελίδων
Με τον όρο οικοσελίδα (home page) αναφερόμαστε σε μιά εισαγωγική ιστοσελίδα, η οποία αποσκοπεί στο να: καλωσορίσει τον αναγνώστη σε μιά συλλογή ιστοσελίδων και να περιγράψει τα περιεχόμενα της συλλογής δώσει οδηγίες πλοηγήσεως για τις σελίδες της συλλογής δώσει πληροφορίες για συναφείς σελίδες στο ΠΠΠ δώσει πληροφορίες για τον συγγραφέα/συγγραφείς της συλλογής

58 Βασικές Αρχές Σχεδιασμού Οικοσελίδων
Η οικοσελίδα πρέπει να είναι μικρού μεγάθους και συνοπτική καθώς χρησιμεύει σαν ευρετήριο και εισαγωγή των περιεχομένων ενός κόμβου στο ΠΠΠ. Η λειτουργικότητα μιας οικοσελίδας δεν πρέπει να εξαρτάται αποκλειστικά από γραφικά διότι έτσι καθίστατι δύσχρηστη σε πολλούς χρήστες. Μιά οικοσελίδα πρέπει να περιλαμβάνει στοιχεία για την επικοινωνία με τους λειτουργούς της. Στην επικεφαλίδα της οικοσελίδας πρέπει να υπάρχει περιγραφικός και συνοπτικός τίτλος (εμφανίζεται στο εξώτερο πλαίσιο των φυλλομετρητών και στα αρχεία σελιδοδεικτών-bookmarks). Στην επικεφαλίδα πρέπει να λαμβάνεται πρόνοια για την επιτυχή καταγραφή της εφαρμογής από τις μηχανές αναζήτησης.

59 Αρχές σχεδιασμού εφαρμογών ΠΠΠ
Κάθε υπερκείμενο μιάς συλλογής υπερμέσων πρέπει να είναι μικρό, συνήθως όχι πάνω από δύο ή τρείς οθόνες δεδομένων. ‘Ολα τα υπερκείμενα μιας περίπλοκης εφαρμογής πρέπει να συμπεριλαμβάνουν «βοηθήματα πλοήγησης» (navigation tools), τα οποία διευκολύνουν τον δικτυακό προσανατολισμό των χρηστών. Τα βοηθήματα αυτά υλοποιούνται με τη μορφή υπερσυνδέσμων πλοήγησης, ενσωματωμένων σε χάρτες πλοήγησης, σκαριφήματα δομής υπερκειμένου, ευρετήρια, κλπ. Τα υπερκείμενα πρέπει να έχουν μιά συνεπή μορφή παρουσίασης, με την ίδια δομή επικεφαλίδων, τα ίδια βοηθήματα πλοήγησης και παρόμοια σκαριφήματα δομής κειμένων. Πολλές φορές είναι χρήσιμη η παράθεση των ίδιων πληροφοριών σε διαφορετικές μορφές. Π.χ., εκτός απο παρουσίαση με υπερμέσα, μπορεί να απαιτείται η παράθεση αρχείου postscript, acrobat ή concatenated HTML για την εύκολη εκτύπωση της παρουσίασης.

60 Χρήση Εικονιδίων Πλοήγησης
Στην περίπτωση πολύ μεγάλων συλλογών υπερεγγράφων είναι χρήσιμο να συμπεριλαμβάνονται σε κάθε υπερέγγραφο εικονίδια πλοήγησης για διευκόλυνση του προσανατολισμού των χρηστών. Τα εικονίδια πλοήγησης διευκολύνουν τον χρήστη να επιστρέφει κατευθείαν στην κεντρική ιστοσελίδα (Web-pages) μιάς εφαρμογής, στο ευρετήριο, σε ιστοσελίδες παροχής πληροφοριών για την εφαρμογή, ή να μετακινείται μέσα σε ένα γραμμικά δομημένο σύνολο ιστοσελίδων.

61 Θέματα σχεδίασης εφαρμογών ΠΠΠ
Καθορισμός του κοινού στο οποίο απευθύνεται η εφαρμογή προσδιορίζει αν η σχεδίαση θα προσαρμοστεί στις ιδιαιτερότητες συγκεκριμένου φυλλομετρητή, ή αν θα καλύψει τις προδιαγραφές πολλών φυλλομετρητών καθορίζει τη σημαντικότητα της ύπαρξης ισχυρής υπολογιστικής και δικτυακής υποδομής Προσδιορισμός των ακολουθητέων προδιαγραφών HTML.

62 Θέματα σχεδίασης εφαρμογών ΠΠΠ
Προσεκτικός σχεδιασμός γραφικών περιορισμένη χρήση μεγάλων εικόνων, εφ‘ όσον αυτές προσθέτουν μόνο στην αισθητική της εφαρμογής συστηματική χρήση του ιδιοστοιχείου ALT χρήση “πινέζας” (thumbnail) με υπερσύνδεσμο προς μεγάλη εικόνα Ελαχιστοποίηση του χρόνου πρόσβασης σε μια εικόνα με χρήση interlaced GIF ιδιοστοιχείων HEIGHT, WIDTH, SRC και LOWSRC με τον σημαντήρα IMG Προσεκτική επιλογή χρωμάτων

63 Σχεδιάζοντας μια πλήρη εφαρμογή ΠΠΠ
Σχεδίαση και υλοποίηση εφαρμογών από πολυπρόσωπες ομάδες: Οικοσελίδα και βασικές “οργανωτικές“ σελίδες υπ‘ ευθύνη προϊσταμένου-αναλυτή. Χρήση υποδειγμάτων (templates) με πρόβλεψη για ενιαία φιλοσοφία πλοήγησης και συστήματος διαπροσωπείας. Απομόνωση αρχείων διαφορετικών τμημάτων της εφαρμογής σε διαφορετικούς καταλόγους (directories). Διαχωρισμός αρχείων ελέγχου και παρουσίασης. ‘Ελεγχος αλλαγών (revision control). Εξιστόρηση του σχεδιασμού εφαρμογής ΠΠΠ με αποτύπωση των συνδέσεων και των δυνατοτήτων πλοήγησης στον υπερ-χώρο της εφαρμογής. Áðü êåöÜëáéï (3) ôïõ Graham

64 Άλλα σχεδιαστικά θέματα
Είναι αναγκαίος ο σωστός προγραμματισμός της ανάπτυξης και επέκτασης μιας εφαρμογής στο ΠΠΠ. Μια καλοσχεδιασμένη εφαρμογή πρέπει να “γηράσκει” και να “διευρύνει” τα περιεχόμενά της, αποφεύγοντας συνήθη προβλήματα όπως αλλαγές στη δομή της εφαρμογής, ριζική διαφοροποίηση της πλοήγησης, άκυροι υπερσύνδεσμοι, κλπ. Μιά εφαρμογή στο ΠΠΠ “γηράσκει” καλά όταν η σχεδίασή της επιτρέπει την ανανέωσή της με υλικό καιγραφικά, χωρίς να χρειάζεται να αλλάξει η οργάνωση των υπερκειμένων και η “συμπεριφορά” τής εφαρμογής προς τους χρήστες. Αντίστοιχα, μια εφαρμογή ΠΠΠ “διευρύνεται”με ικανοποιητικό τρόπο όταν υπάρχει δυνατότητα πρόσθεσης νέων κόμβων και ιεραρχιών υπερκειμένου, χωρίς να είναι απαραίτητη η καταστροφή της δομής και διαπροσωπείας της αρχικής εφαρμογής.

65 Άλλα σχεδιαστικά θέματα
Η ευκολία πλοήγησης και η αποφυγή του “δικτυακού αποπροσανατολισμού“ είναι καίριας σημασίας για την επιτυχία μιας εφαρμογής ΠΠΠ. Οι βασικές ιστοσελίδες πλοήγησης (οικοσελίδα κλπ) δεν πρέπει να μετακινούνται ή να σβύνονται από την εφαρμογή ΠΠΠ. Η πρόσβαση στο κύριο υλικό μιας εφαρμογής ΠΠΠ πρέπει να είναι εύκολη για τους χρήστες. Οι συγγραφείς μιάς εφαρμογής μπορούν να δημιουργούν υπερσυνδέσμους απευθείας από την οικοσελίδα προς τις πιό “δημοφιλείς” ιστοσελίδες της εφαρμογής. Είναι σκόπιμο να δίνονται πληροφορίες για τις αλλαγές που συμβαίνουν σε μια εφαρμογή (π.χ. για το περιεχόμενο που προστίθεται).

66 Άλλα σχεδιαστικά θέματα
Είναι σκόπιμο να ενθαρρύνεται η “παραμονή” του “δικτυακού περιηγητή” στις ιστοσελίδες της εφαρμογής. Είναι χρήσιμο να “ειδοποιείται” ο χρήστης για την απομάκρυνσή του από την εφαρμογή, την στιγμή που επιλέγει κάποιον εξωτερικό υπερσύνδεσμο. Ο διαχειριστής μιας εφαρμογής πρέπει να λαμβάνει υπόψη του τα σχόλια των χρηστών της. Είναι χρήσιμη η παρακολούθηση της χρήσης μιας εφαρμογής από τα κατάστιχα του διαθέτη της.

67 Συνταγές επιτυχίας εφαρμογών ΠΠΠ
Παροχή χρήσιμων, σύγχρονων και ενδιαφερουσών πληροφοριών. Σχεδιασμός και υλοποίηση δυναμικού κόμβου ΠΠΠ: ενθάρρυνση ανατροφοδότησης από τους χρήστες (user feedback) ενσωμάτωση δυνατοτήτων αλληλεπίδρασης με τους χρήστες συνεχής ανανέωση πληροφοριών με ευσταθές περιβάλλον πλοήγησης Δημοσίευση της εφαρμογής σε γρήγορο διαθέτη, συνδεδεμένο με τηλεπικοινωνιακές γραμμές υψηλής χωρητικότητας. Παρακολούθηση των τεχνολογικών εξελίξεων για την διατήρηση της τεχνολογικής “επικαιρότητας” της εφαρμογής.