ΒΑΙΚΕ ΑΡΧΕ ΑΝΑΠΣΤΞΗ ΙΣΟΕΛΙΔΩΝ

Transcript

1 ΒΑΙΚΕ ΑΡΧΕ ΑΝΑΠΣΤΞΗ ΙΣΟΕΛΙΔΩΝ Περιεχόμενα Ειςαγωγι ςτον Παγκόςμιο Ιςτό... 3 Βαςικζσ αρχζσ του Παγκόςμιου Ιςτοφ... 4 Τεχνολογίεσ ανάπτυξθσ περιεχομζνου του Ιςτοφ... 6 Ανάπτυξθ Ιςτοςελίδων... 8 Ερωτιςεισ Αξιολόγθςθσ Οδθγόσ Γλϊςςασ HTML Ειςαγωγι ςτθν HTML Βαςικζσ Ετικζτεσ Βαςικι δομι μιασ HTML ςελίδασ Λίςτεσ και Πίνακεσ Πλαίςια Μορφοποίθςθ CSS Φόρμεσ Πολυμζςα Ερωτιςεισ Αξιολόγθςθσ Server-Side Scripting Ειςαγωγι ςτο τρόπο λειτουργίασ του Server Side Scripting Ειςαγωγι ςτθν γλϊςςα προγραμματιςμοφ PHP Ειςαγωγι ςτισ βάςεισ δεδομζνων Test Questions... Error! Bookmark not defined. Συςτιματα Διαχείριςθσ Περιεχομζνου Ειςαγωγι Γνωρίηοντασ καλφτερα το Moodle Πρόςκεςθ περιεχομζνου Επικοινωνία Ερωτιςεισ Αξιολόγθςθσ Δθμιουργία Αςκιςεων Ειςαγωγι ςτθν XML... 83

2 Ειςαγωγι ςτο Flash Διαδραςτικζσ Αςκιςεισ Συνδυάηοντασ Flash με XML Ερωτιςεισ Αξιολόγθςθσ Forums - Wikis Blogs Forums Wikis Blogs Ερωτιςεισ Αξιολόγθςθσ Παράρτθμα A Πίνακασ ςυμβόλων Παράρτθμα B Απαντιςεισ

3 Δηζαγσγή ζηνλ Παγθόζκην Ιζηό ε απηφ ην θεθάιαην, ζα δνχκε ηη είλαη ην WWW, πσο ιεηηνπξγεί, θαη κηα ζχληνκε πεξηγξαθή ησλ ηερλνινγηψλ πνπ ρξεζηκνπνηνχληαη. Οινθιεξψλνληαο απηφ ην θεθάιαην ζα κπνξείηε: λα εμεγήζεηε ηνλ βαζηθφ κεραληζκφ ηνπ WWW λα αλαθέξεηε ηνπιάρηζηνλ ηέζζεξηο γιψζζεο πνπ ρξεζηκνπνηείηε ζην web λα επηιέμεηε πνηα γιψζζα ζα πξέπεη λα ρξεζηκνπνηήζεηε αλάινγα κε ηηο αλάγθεο ζαο Δπίπεδν: Δηζαγσγηθφ Δθηηκώκελνο Χξόλνο: 20ιεπηά

4 Βαζηθέο αξρέο ηνπ Παγθόζκηνπ Ιζηνύ Αθνινπζνχλ κεξηθέο εξσηήζεηο κε ηηο αληίζηνηρεο απαληήζεηο ηνπο, πνπ αλαθέξνληαη ζε κεξηθά απφ ηα βαζηθά ραξαθηεξηζηηθά πνπ ζρεηίδνληαη κε ην Παγθφζκην Ηζηφ (WWW) θαη ην Γηαδίθηπν (Internet). Οη απαληήζεηο ζε απηέο ηηο εξσηήζεηο ζα ζαο δψζνπλ έλα βαζηθφ ππφβαζξν. Οη ιέμεηο ή θξάζεηο κε έληνλα γξάκκαηα είλαη φξνη πνπ ζρεηίδνληαη κε ηνλ Παγθφζκην Ηζηφ. Τι εύναι ο Παγκόςμιοσ Ιςτόσ; Τι εύναι ϋνασ φυλλομετρητόσ; Ο Παγθφζκηνο Ηζηφο (World Wide Web, WWW ή απινχζηεξα "Web") είλαη έλα ζχζηεκα απφ δηαζπλδεκέλα έγγξαθα ππεξθεηκέλνπ (hypertext), πνπ νλνκάδνληαη ηζηνζειίδεο, πξνζπειάζηκεο κέζσ ηνπ δηαδηθηχνπ. Οη ηζηνζειίδεο (Web pages) κπνξεί λα πεξηέρνπλ θείκελν, εηθφλεο, βίληεν, θαη άιια πνιπκεζηθά ζηνηρεία θαη ε κεηαβίβαζε κεηαμχ ηνπο είλαη δπλαηή κέζσ ππεξζπλδέζεσλ (hyperlinks). Σν πεξηερφκελν ησλ ηζηνζειίδσλ κπνξεί λα ην δεη θαλείο ρξεζηκνπνηψληαο έλα θπιινκεηξεηή (Web browser). Ο θπιινκεηξεηήο (web browser) είλαη κηα εθαξκνγή πνπ επηηξέπεη ζηνλ ρξήζηε λα βιέπεη θείκελν, εηθφλεο, βίληεν, κνπζηθή, παηρλίδηα θαη άιιν πεξηερφκελν πνπ βξίζθεηαη ζε κηα ηζηνζειίδα ζε έλα ηζηνρψξν (Website) ζηνλ Παγθφζκην Ηζηφ ή ζε έλα ηνπηθφ δίθηπν. Σν θείκελν θαη νη εηθφλεο πνιιέο θνξέο πεξηέρνπλ ππεξζπλδέζκνπο πνπ νδεγνχλ ζε άιιεο ηζηνζειίδεο ζηνλ ίδην ή ζε δηαθνξεηηθφ ηζηνρψξν. Έλαο ηζηνρψξνο είλαη έλα ζχλνιν απφ ηζηνζειίδεο δηαζπλδεκέλεο κεηαμχ ηνπο. Οη θπιινκεηξεηέο επηηξέπνπλ ζε έλαλ ρξήζηε λα πξνζπειάζεη εχθνια πιεξνθνξία ζε πνιιέο ηζηνζειίδεο, αθνινπζψληαο απηνχο ηνπο ππεξζπλδέζκνπο. Τι εύναι ϋνασ εξυπηρετητόσ παγκόςμιου ιςτού; Έλαο εμππεξεηεηήο παγθφζκηνπ ηζηνχ (Web Server) είλαη έλαο ππνινγηζηήο πνπ δηαλέκεη Ηζηνζειίδεο. Απηφ ζεκαίλεη επίζεο φηη απηέο νη ηζηνζειίδεο είλαη απνζεθεπκέλεο ζε απηφλ. Κάζε εμππεξεηεηήο έρεη κηα δηεύζπλζε IP (Internet Protocol) θαη πηζαλφλ κηα νλνκαηνδνζία (domain name). Έλα παξάδεηγκα IP δηεχζπλζεο είλαη Ωζηφζν, είλαη πην θηιηθφ ζηνλ ρξήζηε λα ρξεζηκνπνηεί έλα URL (Uniform Resource Location), πνπ πεξηέρεη κηα νλνκαηνδνζία. Γηα παξάδεηγκα, εάλ πξνζπειάζεηε ηελ URL ζηνλ θπιινκεηξεηή ζαο,

5 απνζηέιιεηαη κηα αίηεζε ζηνλ εμππεξεηεηή κε νλνκαηνδνζία upatras.gr. Ο εμππεξεηεηήο παίξλεη ηελ ηζηνζειίδα κε φλνκα index.html θαη ηελ ζηέιλεη ζηνλ θπιινκεηξεηή. Τι εύναι ϋνασ υπερςύνδεςμοσ; Τι εύναι το υπερκεύμενο; Έλαο ππεξζχλδεζκνο (hyperlink), ή πην ζχληνκα ζχλδεζκνο (link), είλαη κηα αλαθνξά κέζα ζε έλα θείκελν ππεξθεηκέλνπ πνπ κπνξεί λα ηελ αθνινπζήζεη θαλείο άκεζα. Ζ πεξηνρή απφ ηελ νπνία κπνξεί θαλείο λα ελεξγνπνηήζεη ηνλ ππεξζπλδεζκν απνθαιείηαη άγθπξα (anchor). Ο πξννξηζκφο (target) είλαη απηφ ζην νπνίν δείρλεη ν ζχλδεζκνο, θαη κπνξεί λα είλαη κηα άιιε πεξηνρή κέζα ζηελ ίδηα ηζηνζειίδα, κηα άιιε ηζηνζειίδα ή κηα ζπγθεθξηκέλε πεξηνρή ζε άιιε ηζηνζειίδα, αλάινγα κε ηνλ ηχπν ηνπ ππεξθεηκέλνπ. Τπεξθείκελν (Hypertext) είλαη έλα είδνο θεηκέλνπ ζπλήζσο δεκνζηεπκέλνπ ζε ηζηνζειίδεο πνπ παξέρεη πην πινχζηα ιεηηνπξγηθφηεηα απφ ην απιφ θείκελν, κε ην λα επηηξέπεη ζηνλ ρξήζηε λα πξνζπειάζεη ελδηαθέξνληεο ζπλδέζκνπο ζε άιιεο ηζηνζειίδεο ζπλδεδεκέλεο κε ζπγθεθξηκέλεο ιέμεηο ή εηθφλεο κέζα ζηελ ζειίδα. Δθηφο απφ απιφ θείκελν, έλα ππεξθείκελν κπνξεί λα πεξηέρεη πίλαθεο, εηθφλεο θαη άιιεο δηαηάμεηο. Δθηφο απφ ππεξζπλδέζκνπο κπνξεί λα ππάξρεη αιιειεπίδξαζε φπσο λα εκθαλίδεηαη θείκελν φηαλ ν δξνκέα ηνπ πνληηθηνχ κεηαθηλείηαη πάλσ απφ θάπνηα πεξηνρή, λα αλαπαξάγεηαη βίληεν, ή κηα θφξκα λα απνζηέιιεηαη αθνχ ζπκπιεξσζεί. Σν πην επεθηακέλν παξάδεηγκα ππεξθεηκέλνπ ζήκεξα είλαη ν Παγθφζκηνο Ηζηφο.

6 Τερλνινγίεο αλάπηπμεο πεξηερνκέλνπ ηνπ Ιζηνύ Αθνινπζνχλ νη πην ζπλεζηζκέλεο ηερλνινγίεο πνπ ρξεζηκνπνηνχληαη γηα ηελ αλάπηπμε ηζηνζειίδσλ. Πξηλ μεθηλήζεηε λα δεκηνπξγήζεηε κηα ηζηνζειίδα πξέπεη πάληα λα αθηεξψλεηε ιίγν ρξφλν πξηλ απνθαζίζεηε πνηα ηερλνινγία ζα ρξεζηκνπνηήζεηε. HTML Ζ HTML ( HyperText Markup Language), είλαη κηα γιψζζα ζπκβνιηζκνχ πνπ ρξεζηκνπνηείηαη γηα λα θσδηθνπνηήζεη ηζηνζειίδεο. Παξέρεη ζηνλ θπιινκεηξεηή ηελ πιεξνθνξία γηα λα αλαπαξαζηήζεη ηελ ηζηνζειίδα. Ζ HTML είλαη ε γιψζζα ηνπ παγθφζκηνπ ηζηνχ, θαη θάζε ζρεδηαζηήο πεξηερνκέλνπ Ηζηνχ πξέπεη λα έρεη κηα βαζηθή θαηαλφεζε ηεο. CSS - Cascading Style Sheets Ζ CSS θαζνξίδεη πσο ζα εκθαλίδνληαη ηα ζηνηρεία HTML. Σα External style sheets επηηξέπνπλ λα αιιάδεη ε εκθάληζε φισλ ησλ ηζηνζειίδσλ ζηνλ ηζηνρψξν ζαο, απιά αιιάδνληαο έλα κφλν αξρείν. XML Ένα εργαλεύο για την περιγραφό δεδομϋνων Ζ XML δελ απνηειεί αληηθαηάζηαζε ηεο HTML. Ζ XML πεξηγξάθεη δεδνκέλα, ελψ ε HTML απεηθνλίδεη ηα δεδνκέλα. Ζ XML είλαη έλαο ηξφπνο αλαπαξάζηαζεο δεδνκέλσλ, ηέηνηνο ψζηε λα δηεπθνιχλεη ηελ απνζήθεπζε θαη κεηαθνξά δεδνκέλσλ κεηαμχ ζπζηεκάησλ, αλεμαξηήησο ηνπ πιηθνχ ή ινγηζκηθνχ πνπ απηά ρξεζηκνπνηνχλ. JavaScript - Client-Side Scripting Σν Client-side scripting αθνξά ηνλ πξνγξακκαηηζκφ ηεο ζπκπεξηθνξάο ηνπ θπιινκεηξεηή. ε JavaScript δίλεη ζηνπο ζρεδηαζηέο HTML ζειίδσλ έλα εξγαιείν πξνγξακκαηηζκνχ ε JavaScript κπνξεί λα εηζάγεη δπλακηθά θείκελν ζε κηα ηζηνζειίδα ε JavaScript κπνξεί λα αληηδξά ζε γεγνλφηα ε JavaScript κπνξεί λα αιιάδεη ζηνηρεία ηεο HTML ε JavaScript κπνξεί λα ρξεζηκνπνηεζεί γηα επηθχξσζε δεδνκέλσλ ASP or PHP - Server-Side Scripting Σν Server-side scripting αθνξά ηνλ πξνγξακκαηηζκφ ελφο εμππεξεηεηή ψζηε λα παξέρεη πην δπλακηθά πεξηερφκελν. Με ην server-side scripting, κπνξεί θαλείο:

7 λα επεμεξγαζηεί ή λα πξνζζέζεη πεξηερφκελν ζε ηζηνζειίδα δπλακηθά λα απαληήζεη ζε εξσηήκαηα ή θφξκεο ρξεζηψλ λα έρεη πξφζβαζε ζε κηα βάζε δεδνκέλσλ θαη λα παξέρεη ηα απνηειέζκαηα ηεο αλαδήηεζεο ζηνλ θπιινκεηξεηή. λα έρεη πξφζβαζε ζε αξρεία θαη λα επηζηξέθεη αλάινγα πιεξνθνξία ζηνλ θπιινκεηξεηή λα κεηαηξέςεη δεδνκέλα XML ζε HTML θαη λα ηα επηζηξέςεη λα παξέρεη εμαηνκηθεπκέλεο ηζηνζειίδεο λα παξέρεη αζθάιεηα θαη έιεγρν ηεο πξφζβαζεο ζε κηα ηζηνζειίδα λα πξνζαξκφδεη ηελ ηζηνζειίδα αλάινγα κε ηνλ θπιινκεηξεηή ηνπ ρξήζηε λα ειαρηζηνπνηεί ηελ θπθινθνξία ηνπ δηθηχνπ Διαχεύριςη δεδομϋνων με την SQL Ζ SQL είλαη γιψζζα πνπ ρξεζηκνπνηείηαη γηα ηελ πξφζβαζε θαη ηελ επεμεξγαζία βάζεσλ δεδνκέλσλ ζε εθαξκνγέο φπσο MySQL, SQL Server, MS Access, Oracle, Sybase, DB2, θ.α. Ζ γλψζε SQL είλαη πνιιή ζεκαληηθή γηα νπνηνλδήπνηε ζέιεη λα απνζεθεχζεη ή λα αλαθηήζεη δεδνκέλα απφ κηα βάζε.

8 Αλάπηπμε Ιζηνζειίδσλ Τι λογιςμικό χρειϊζεται για την ανϊπτυξη Ιςτοςελύδων; Παξφιν πνπ ν θψδηθα HTML κηαο ηζηνζειίδαο κπνξεί λα γξαθηεί απφ νπνηνλδήπνηε επεμεξγαζηή θεηκέλνπ (φπσο ην Notepad), ππάξρνπλ εμεηδηθεπκέλνη επεμεξγαζηέο (HTML editors) πνπ πξνζθέξνπλ επθνιίεο θαη απμεκέλε ιεηηνπξγηθφηεηα Γελ ρξεηάδεηαη θαλ λα μέξεηο HTML γηα λα θηηάμεηο κηα ηζηνζειίδα. Τπάξρνπλ δηάθνξα είδε HTML editors φπσο θεηκέλνπ, αληηθεηκέλσλ and WYSIWYG (δείηε επφκελν εξψηεκα). Τι προςφϋρον οι επεξεργαςτϋσ πηγαύου κώδικα; Οη επεμεξγαζηέο θεηκέλνπ πνπ απεπζχλνληαη γηα ζπγγξαθή HTML ζπλήζσο παξέρνπλ «syntax highlighting», δειαδή δίλνπλ εηδηθή κνξθή (γξακκαηνζεηξά, ρξψκα) ζηα ζηνηρεία (tags) ηεο HTML, θάλνληαο πην εχθνιε ηελ αλάγλσζε ηνπ θψδηθα. Υξεζηκνπνηψληαο πξφηππα, εξγαιεηνζήθεο θαη ζπληνκεχζεηο πιήθηξσλ κπνξνχλ λα εηζαρζνχλ εχθνια ζπλήζε ζηνηρεία θαη δνκέο HTML θψδηθα. Οδεγνί, ππνδείμεηο ζηα εξγαιεία θαη απηφκαηε ζπκπιήξσζε κπνξεί λα βνεζήζνπλ ζε ζπλεζηζκέλεο ιεηηνπξγίεο. Οη Text editors απαηηνχλ απφ ηνλ ρξήζηε λα έρεη γλψζε ηεο HTML θαη φπνηαο άιιεο ηερλνινγίαο φπσο CSS ή Javascript ζέιεη λα ρξεζηκνπνηήζεη. ηελ παξαθάησ εηθφλα κπνξείηε λα δείηε πσο θαίλεηαη ν HTML θψδηθαο ζε έλαλ εμεηδηθεπκέλν επεμεξγαζηή θεηκέλνπ.

9 Τι εύναι ϋνα WYSIWYG εργαλεύο; Έλαο «What You See Is What You Get»(WYSIWYG) επεμεξγαζηήο θεηκέλνπ παξέρεη έλα πεξηβάιινλ πνπ δείρλεη πσο ζα θαίλεηαη ε ηζηνζειίδα κέζα ζηνλ θπιινκεηξεηή. Οη WYSIWYG επεμεξγαζηέο δελ απαηηνχλ γλψζε HTML γιψζζαο, νπφηε είλαη επθνιφηεξν γηα θάπνηνλ λα μεθηλήζεη απφ απηνχο. Τι εύναι οι επεξεργαςτϋσ ιςτοςελύδων? Οη επεμεξγαζηέο ηζηνζειίδσλ (Web Site Editors) ρξεζηκνπνηνχληαη φρη κφλν γηα ηελ αλάπηπμε ηζηνζειίδσλ αιιά θαη γηα ηελ δηαρείξηζε ηνπο. Δπηηξέπνπλ ηελ δεκηνπξγία ζεκάησλ ηζηνζειίδσλ, ηελ αλαδήηεζε θαη αληηθαηάζηαζε θεηκέλνπ ζε πνιιαπιέο ηζηνζειίδεο θαη άιια. Παξέρνπλ πνιχ πεξηζζφηεξεο ιεηηνπξγίεο ζηνπο ζρεδηαζηέο ηζηνζειίδσλ αιιά ηαπηφρξνλα είλαη θαη αξθεηά δχζθνιεο γηα ηνλ αξράξην ρξήζηε. Δπίζεο απηά ηα απηνπνηεκέλα εξγαιεία παξάγνπλ ζπρλά θψδηθα πνπ δελ είλαη θαη ηφζν ζσζηά δνκεκέλε HTML ή δεκηνπξγνχλ αθχζηθα κεγάια αξρεία θαη πεξίπινθεο δνκέο θαθέισλ. Δπίζεο αθνχ δεκηνπξγήζεηε κηα ηζηνζειίδα κε απηνχο είλαη πνιχ δχζθνιν λα ηελ επεμεξγαζηείηε κε νπνηνλδήπνηε άιινλ editor ιφγν ηνπ κε ζπκβαηηθνχ θψδηθα HTML πνπ παξάγνπλ. Ο Παγθφζκηνο ηζηφο είλαη ρηηζκέλνο πάλσ ζηε HTML θαη φζν πεξηζζφηεξν ηελ γλσξίδεηαη ηφζν πην ειθπζηηθέο θαη απνδνηηθέο ζειίδεο ζα κπνξείηε λα ζρεδηάζεηε. Οη Web Site Editors φπσο ν Frontpage κπνξεί λα είλαη αξθεηά θηιηθνί πξνο ηνλ ρξήζηε αιιά αλ απηφο ζέιεη λα αζρνιεζεί ζνβαξά κε ηελ αλάπηπμε ηζηνζειίδσλ είλαη αλαγθαίν λα έρεη βαζηά θαηαλφεζε ηεο γιψζζαο HTML.

10

11 Δξσηήζεηο Αμηνιόγεζεο 1. Πωσ περιηγούμαςτε μεταξύ διαφορετικών ιςτοςελύδων; A. κέζσ ππεξζπλδέζκσλ B. κέζσ ππεξθείκελν C. κέζσ Javascript D. κέζσ εξσηεκάησλ SQL 2. Ποια γλώςςα μορφοπούηςησ χρηςιμοποιεύται για την κωδικοπούηςη ιςτοςελύδων; A. HTML B. C++ C. CSS D. Lua 3. Πωσ μπορούμε να δούμε το περιεχόμενο ιςτοςελύδων; A. κε επεμεξγαζηέο ηζηνζειίδσλ B. κε θπιινκεηξεηέο C. κε επεμεξγαζηέο θεηκέλνπ 4. Ποια γλώςςα χρηςιμοποιεύται για πρόςβαςη ςε βϊςεισ δεδομϋνων? A. CSS B. SQL C. SWRL D. SPARQL 5. Πωσ μπορεύ κανεύσ να δημιουργόςει δυναμικϋσ ιςτοςελύδεσ; A. κε HTML B. κε XML C. κε CSS D. κε PHP 6. Ποιοι editors παρϋχουν δυνατότητα να εμφανύζεται το πώσ θα φαύνεται η ιςτοςελύδα ςτον φυλλομετρητό; A. WYSIWYG B. Απινί επεμεξγαζηέο Κεηκέλνπ C. Πξνγξακκαηηζηηθά Πεξηβάιινληα

12 7. Από ποιερ λέξειρ πποέπσονηαι ηα απσικά ηος WWW; A. World Wide Web B. World Wide Webpages C. World Wild West D. World Wide Websites 8. Έναρ θςλλομεηπηηήρ πποζπελάζει μια ιζηοζελίδα ζε έναν εξςπηπεηηηή μέζυ.. A. κελχκαηνο αίηεζεο B. κελχκαηνο απάληεζεο C. ζήκαηνο δηαθνπήο D. κελχκαηνο SMS

13 Οδεγόο Γιώζζαο HTML Ζ ελφηεηα απηή απνηειεί έλαλ νδεγφ εθκάζεζεο ηεο HTML, ηεο γιψζζαο πνπ ρξεζηκνπνηείηαη ζηνλ Παγθφζκην Ηζηφ Οινθιεξψλνληαο απηήλ ηελ ελφηεηα ζα κπνξείηε λα αιιάμεηε δηαθφζκεζε ζε θείκελν λα πξνζζέζεηε εηθφλεο ζε ηζηνζειίδεο λα δεκηνπξγήζεηε πίλαθεο, ιίζηεο ή θφξκεο λα αιιάμεηε ην ζηπι πνιιψλ ηζηνζειίδσλ κε CSS Δπίπεδν: Δηζαγσγηθφ Δθηηκώκελνο ρξόλνο: 2 ψξεο

14 Δηζαγσγή ζηελ HTML Τι εύναι η HTML; Ζ HTML απνηειεί αθξψλπκν ησλ HyperText Markup Language. HyperText, δειαδή σπερκείμενο είλαη ε κέζνδνο κε ηελ νπνία κπνξεί θαλείο λα πεξηεγεζεί θαλείο ζηνλ παγθφζκην ηζηφ, παηψληαο ζε θείκελν πνπ νλνκάδεηαη ππεξζχδεζκνο (hyperlink) έηζη ψζηε λα θέξεη άιιεο ηζηνζειίδεο. Σν πξφζεκα ππέξ (hyper) ζεκαίλεη φηη δελ είλαη γξακκηθή, δειαδή κπνξεί θαλείο λα πάεη ζε νπνπδήπνηε κέξνο ζηνλ ηζηφ φπνηε ζέιεη παηψληαο θαηάιιεινπο ζπλδέζκνπο δελ είλαη πξνθαζνξηζκέλε δειαδή ε ζεηξά πνπ ζα γίλνπλ ελέξγεηεο. Markup δειαδή δηακφξθσζε είλαη απηφ πνπ πεηπραίλνπλ νη HTML εηηθέηεο (tags) ζην θείκελν πνπ πεξηθιείνπλ. Σν ζεκαηνδνηνχλ ζαλ κηα εηδηθή κνξθή θεηκέλνπ (γηα παξάδεηγκα: πλάγιο). Ζ HTML είλαη κηα γιψζζα (Language), αθνχ έρεη δηθέο ηηο θσδηθέο ιέμεηο θαη ζχληαμε φπσο νπνηαδήπνηε άιιε γιψζζα. Τι εύναι μια ςελύδα HTML; Μηα ζειίδα HTML είλαη έλα έγγξαθν ην νπνίν ρξεζηκνπνηεί ηελ γιψζζα HTML γηα λα δηακνξθψζεη πσο ζα εκθαληζηεί/δνκεζεί ην θείκελν φηαλ θάπνηνο επηζθεθηεί ηελ ηζηνζειίδα. Γηα παξάδεηγκα κπνξεί λα ζεκαηνδνηεζεί φηη θάπνην θείκελν ζα απνηειεί ππεξζχλδεζκν, επηθεθαιίδα, παξάγξαθν, ιίζηα θηιπ. ή λα εκπινπηίζεη ην θείκελν κε αιιειεπηδξαζηηθέο θφξκεο ή λα ελζσκαηψζεη εηθφλεο θαη άιια αληηθείκελα. Μηα ζειίδα έρεη ηελ θαηάιεμε ".html" ή ".htm". Γείηε πσο θαίλεηαη κηα απιή ηζηνζειίδα φηαλ ηελ επηζθεθηεί θάπνηνο κε ρξήζε ελφο θπιινκεηξεηή:

15 Τι μορφό ϋχει ϋνα αρχεύο με κώδικα HTML; Αο ππνζέζνπκε φηη έρνπκε κηα απιή ηζηνζειίδα απνζεθεπκέλε ζε έλα αξρείν θεηκέλνπ πνπ έρνπκε νλνκάζεη "simplepage.html". ηνλ παξαθάησ πίλαθα κπνξείηε λα δείηε ζηα αξηζηεξά ηελ ηζηνζειίδα φπσο θαίλεηαη φηαλ ηελ πξνζπειάζνπκε κε θπιινκεηξεηή. Γεμηά κπνξείηε λα δείηε ηνλ θψδηθα ηεο ηζηνζειίδαο φπσο θαίλεηαη αλ αλνίμεηε ην αξρείν κε έλαλ επεμεξγαζηή θεηκέλνπ.

16 <html> <head> <title> Elinda Beach </title> </head> <body bgcolor="gold"> <h1 align="center"> Elinda </h1> <div align="center"> <img alt="puma" src="elindabeach.jpg"> </div> <div align="center"> <p> Elinda is a well sheltered bay at the west part of the island, near <a title="anavatos village Chios" href="anavatos.asp">anavatos</a><br> It is a wonderful beach with thick sand and clear waters, ideal for swimming and sunbathing. </p> <p> There is a wreck of a roman ship not far from the shore. <br> The name Elinda or Alinda derives from the ancient Greek word "alios" that means "marine". </p> </div> </body> </html>

17 Βαζηθέο Δηηθέηεο Τι εύναι οι ετικϋτεσ (tags); Ζ HTML ρξεζηκνπνηεί εηηθέηεο "tags" γηα λα θαζνξίζεη πψο ζα δηακνξθσζεί ην θείκελν φηαλ θάπνηνο πξνζπειάζεη ηελ ηζηνζειίδα απφ θπιινκεηξεηή. Οη εηηθέηεο πεξηθιείνληαη απφ γσληαθέο παξελζέζεηο (<,>). Δπίζεο ηηο πεξηζζφηεξεο θνξέο εκθαλίδνληαη ζαλ δεχγε. ε θάζε δεχγνο ππάξρεη έλα opening tag < > θαη έλα closing tag </ >. Σν πξψην πεξηέρεη έλα φλνκα εηηθέηαο θαη κεξηθέο θνξέο ηηκέο γηα θάπνηα ραξαθηεξηζηηθά (attributes). εκαηνδνηεί ζηνλ θπιινκεηξεηή φηη ζέιεηε λα νξίζεηε κηα ζπγθεθξηκέλε δηακφξθσζε μεθηλψληαο απφ απηφ ην ζεκείν θαη ζε φηη αθνινπζεί. Σν closing tag ζεκαηνδνηεί κε ην ζχκβνιν / (forward slash) αθνινπζνχκελν απφ ην φλνκα εηηθέηαο φηη ζέιεηε λα ζηακαηήζεηε απηή ηελ δηακφξθσζε. Πωσ μπορώ να αλλϊξω το ςτυλ κειμϋνου; Έληνλν Γηα λα εκθαλίζεηε θείκελν ζε έληνλε γξαθή, ην πεξηθιείεηαη κε <b></b> εηηθέηεο: <b>train Of Consequences</b> Train Of Consequences Πιάγην Γηα λα εκθαλίζεηε θείκελν ζε πλάγια μορθή, ην πεξηθιείεηαη κε <i></i> εηηθέηεο. <i> Almost Honest</i> Almost Honest Γείθηεο Γηα λα εκθαλίζεηε θείκελν ζαλ δείθηε, ην πεξηθιείεηαη κε  tags. _{in My Darkest Hour} In My Darkest Hour Δθζέηεο Γηα λα εκθαλίζεηε θείκελν ζαλ εθζέηε, ην πεξηθιείεηαη κε  εηηθέηεο. ^{burning Bridges} Burning Bridges

18 Πωσ χρηςιμοποιώ επικεφαλύδεσ; Μηα επηθεθαιίδα δεκηνπξγείηαη κε ηελ εηηθέηα <H1>. Οπζηαζηηθά ππάξρνπλ έμη ηχπνη επηθεθαιίδαο: <H1> (ε κεγαιχηεξε) κέρξη <H6> (ε κηθξφηεξε). Γηακνξθσκέλν θείκελν Back In The Day Tornado Of Souls Truth Be Told HTML θώδηθαο <H1> Back In The Day</H1> <H3>Tornado Of Souls</H3> <H6>Truth Be Told</H6> Πώσ μπορώ να διακοςμόςω κεύμενο? Τπάξρνπλ πνιινί ηξφπνη λα αιιάμεηε ηε κνξθή ηνπ θεηκέλνπ ζαο. Καηαξράο κπνξείηε λα αιιάμεηε γξακκαηνζεηξά. Απηφ κπνξεί λα γίλεη ρξεζηκνπνηψληαο ηελ εηηθέηα face σο εμήο: <font face= Comic Sans Ms >Elysian Fields</font> Elysian Fields Παξαζέηνπκε κεξηθέο γξακκαηνζεηξέο πνπ κπνξείηε λα δνθηκάζεηε:: Arial Arial Black Arial Narrow Book Antiqua Bookman Old Style Century Gothic Comic Sans MS Courier New Garamond Times New Roman Verdana Μπνξείηε επίζεο λα αιιάμεηε ην κέγεζνο ηεο γξακκαηνζεηξάο. Απηφ γίλεηαη κε ηελ ηδηφηεηα size σο εμήο: <font size="1">blood Of Heroes</font> Blood Of Heroes <font size="3">insomnia</font> Insomnia

19 <font size="5">i'll Be There</font> I'll Be There Σέινο, κπνξείηε λα αιιάμεηε ην ρξψκα ηνπ θεηκέλνπ κε ηελ ηδηφηεηα color σο εμήο: <font color="orange">rude Awakening</font> Rude Awakening αλ άζθεζε πξνζπαζήζηε λα γξάςεηε θψδηθα ψζηε λα εκθαλίζεηε ην παξαθάησ κνξθνπνηεκέλν θείκελν: Cryptic Writings The World Needs A Hero Πωσ μπορώ να ορύςω παραγρϊφουσ και να αφόςω κενϋσ γραμμϋσ;. Μηα παξάγξαθν μεθηλάεη κε ην ζηνηρείν <P>, θαη ηεξκαηίδεηαη κε ην ζηνηρείν </P>. Γηα λα αθήζεηε ηελ γξακκή ζηελ νπνία βξίζθεζηε θαη λα πάηε ζε επφκελε κπνξείηε λα ρξεζηκνπνηήζεηε ην <BR/>. Γείηε ζρεηηθά παξαδείγκαηα: Γηακνξθσκέλν Κείκελν Last sentence of a paragraph The first line of a new paragraph. A line of text. On a new line. Κώδηθαο HTML Last sentence of a paragraph <P> The first line of a new paragraph. A line of text. <BR/> On a new line. αλ άζθεζε πξνζπαζήζηε λα γξάςεηε θψδηθα ψζηε λα εκθαλίζεηε ην παξαθάησ κνξθνπνηεκέλν θείκελν: University Of Patras

20 Πωσ μπορώ να ειςϊγω ειδικϊ ςύμβολα; Κάζε ζχκβνιν αληηζηνηρεί ζε έλαλ κνλαδηθφ θσδηθφ αλάινγα κε θάπνηα θσδηθνπνίεζε ραξαθηήξσλ. Παξαθάησ ζα αλαθέξνπκε ηξεηο ηξφπνπο λα εηζάγεηε ζχκβνια ζε ηζηνζειίδεο ρξεζηκνπνηψληαο παξαδείγκαηα. Μπνξείηε λα αληηγξάςεηε ηνλ θψδηθα φπνηε ζέιεηε έλα ζχκβνιν αληηθαζηζηψληαο κε ην θσδηθφ ηνπ ζπκβφινπ πνπ επηζπκείηε. HTML Numeric Code παξάδεηγκα: γηα ην ζχκβνιν { γξάθεηε { Font Face Tag παξάδεηγκα: γηα ηελ έθθξαζε x A γξάςηε: x<font face="symbol"> </font>a HTML Literal Code παξάδεηγκα: γηα ην ζχκβνιν,γξάθεηε ην Παξάξηεκα Α παξαζέηνπκε πίλαθα κε ηνπο θσδηθνχο δηάθνξσλ ρξήζηκσλ ζπκβφισλ. αλ άζθεζε πξνζπαζήζηε λα γξάςεηε θψδηθα ψζηε λα εκθαλίζεηε ην παξαθάησ κνξθνπνηεκέλν θείκελν: f(x)dx

21 Βαζηθή δνκή κηαο HTML ζειίδαο Ποια εύναι η βαςικό δομό μιασ HTML ςελύδασ; Βαζηθή δνκή κηαο HTML ζειίδαο: <html> <head>... </head> <body>... </body> </html> Η εηηθέηα HTML Έλα HTML έγγξαθν μεθηλά κε έλα HTML ζηνηρείν πνπ πεξηέρεη ηηο εηηθέηεο HEAD θαη BODY. Αξρή κηαο HTML ζειίδαο: Γξάςηε <html> γηα λα μεθηλήζεηε ην HTML κέξνο ηνπ θεηκέλνπ Αθήζηε κεξηθά θελά γηα λα δεκηνπξγήζεηε ηελ ππφινηπε ηζηνζειίδα Γξάςηε </html> Η εηηθέηα Head Σν ηκήκα head είλαη απηφ ζην νπνίν θαζνξίδνπκε ηνλ ηίηιν ηεο ηζηνζειίδαο, πεξηιακβάλνπκε πιεξνθνξία ζρεηηθά κε ηε ζειίδα γηα λα βνεζήζεη ηηο κεραλέο αλαδήηεζεο φπσο απηή ηεο Google, νξίδνπκε ηελ ηνπνζεζία ηεο ηζηνζειίδαο, πξνζζέηνπκε style sheets, θαη γξάθνπκε scripts. Γεκηνπξγία ηνπ ηκήκαηνο head: Καηεπζείαλ κεηά ην άλνηγκα ηεο εηηθέηαο html γξάςηε <head>

22 Αθήζηε κεξηθά θελά γηα ηα πεξηερφκελα ηνπ ηκήκαηνο head Γξάςηε </head> Η εηηθέηα Body Σν ζψκα ηνπ HTML εγγξάθνπ πεξηθιείεη ην πεξηερφκελν ηεο ηζηνζειίδαο ζαο, δειαδή ην θνκκάηη πνπ ζα είλαη νξαηφ ζηνπο επηζθέπηεο, ζπκπεξηιακβαλνκέλσλ ησλ γξαθηθψλ θαη ινηπψλ πνιπκέζσλ. Γεκηνπξγία ηνπ ηκήκαηνο body: Μεηά απφ ηελ ηειηθή εηηθέηα </head>, γξάςηε <body> Αθήζηε κεξηθά θελά γηα ηα πεξηερφκελα ηεο ηζηνζειίδαο ζαο Γξάςηε </body>

23 Λίζηεο θαη Πίλαθεο Πυρ μποπώ να δημιοςπγήζυ μια λίζηα? Γηα λα δεκηνπξγήζνπκε κηα ιίζηα αθνινπζνχκε ηα εμήο βήκαηα: 1.Πιεθηξνινγνχκε <ol> γηα λα μεθηλήζνπκε κηα δηαηεηαγκέλε ιίζηα ή <ul> γηα κηα μθδιατεταγμζνθ ιίζηα 2. Πιεθηξνινγνχκε <li γηα λα μεθηλήζνπκε ην πξψην ζηνηρείν ηεο ιίζηαο. 3. Πιεθηξνινγνχκε ην θείκελν πνπ ζα ζπκπεξηιεθζεί ζην ζηνηρείν ηεο ιίζηαο. 4. Πιεθηξνινγνχκε </li> γηα λα νινθιεξψζνπκε ην θάζε ζηνηρείν ηεο ιίζηαο. 5. Δπαλαιακβάλνπκε ηα βήκαηα 2 έσο 4 γηα θάζε λέν ζηνηρείν ηεο ιίζηαο 6. Πιεθηξνινγνχκε </ol> ή </ul> αλάινγα κε ηελ εηηθέηα αξρήο γηα λα νινθιεξψζνπκε ηελ ιίζηα. Παράδειγμα μιας λίζηας:

24 Πυρ μποπώ να δημιοςπγήζυ ένα πίνακα? Οη πίλαθεο απνηεινχληαη απφ γξακκέο θειηψλ. Σν πιήζνο ησλ θειηψλ θάζε γξακκήο θαζνξίδεη ην ζρήκα ηνπ πίλαθα. ε θάζε θειί ηνπ πίλαθα κπνξνχκε λα ηνπνζεηήζνπκε απφ θείκελν κέρξη εηθφλεο ή αθφκε θαη άιινπο πίλαθεο. Γηα λα δεκηνπξγήζνπκε έλαλ απιφ πίλαθα: 1. Πιεθηξνινγνχκε <table>. 2. Πιεθηξνινγνχκε <tr> γηα λα νξίζνπκε ηελ αξρή ηεο πξψηεο γξακκήο. 3. Πιεθηξνινγνχκε <td> γηα λα νξίζνπκε ηελ αξρή ηνπ θειηνχ. 4. Πιεθηξνινγνχκε ηα πεξηερφκελα ηνπ θειηνχ. 5.Πιεθηξνινγνχκε </td> γηα λα νινθιεξψζνπκε ην θειί 6. Δπαλαιακβάλνπκε ηα βήκαηα 3 έσο 5 γηα θάζε θειί ηεο γξακκήο. Όηαλ ηειεηψζνπκε κε ηα θειηά ηεο γξακκήο πιεθηξνινγνχκε </tr>. 7. Δπαλαιακβάλνπκε ηα βήκαηα 2 έσο 6 γηα θάζε γξακκή. 8. Γηα λα νινθιεξψζνπκε ηνλ πίλαθα πιεθηξνινγνχκε </table>. Παράδειγμα ενός πίνακα:

25 αλ άζθεζε πξνζπαζήζηε λα δεκηνπξγήζεηε ηνλ παξαθάησ πίλαθα: Wellcome to our site! Bellow you can see our new Laptops Product Operating system Price Compaq Presario Windows Vista $ SONY VAIO VGN Windows Vista $ TOSHIBA SATELLITE Windows Vista $989.99

26 Πιαίζηα Τι εύναι τα πλαύςια (frames); Με ηα frames (πιαίζηα) κπνξεί θαλείο λα εκθαλίζεη πεξηζζφηεξα απφ έλα έγγξαθα HTML ζην ίδην παξάζπξν ηνπ θπιινκεηξεηή. Κάζε HTML έγγξαθν θαιείηαη frame, θαη θάζε frame είλαη αλεμάξηεην απφ ηα ππφινηπα. ηελ επφκελε εηθφλα κπνξείηε λα δείηε έλα παξάδεηγκα ηζηνζειίδαο πνπ ρξεζηκνπνηεί frames: Μπνξείηε λα δείηε κηα θάζεηε γξακκή πνπ ρσξίδεη ηελ νζφλε ζε δχν θνκκάηηα. Σν αξηζηεξά είλαη έλα sidebar ελψ ζην δεμηά θαίλεηαη κηα ιίζηα απφ αλαθνηλψζεηο γηα έλα κάζεκα Εσνινγίαο. Απηά ηα δχν είλαη μερσξηζηά έγγξαθα HTML documents φπσο απηά πνπ έρνπκε δεη κέρξη ηψξα, νπφηε αο επηθεληξσζνχκε ζηνλ θψδηθα πνπ πξέπεη λα γξάςεηε γηα λα ηα εηζάγεηαη ζηελ ηζηνζειίδα: <html> <head> <title></title> </head> <frameset cols="15%,*"> <frame src="sidebar.html" name=sidebar noresize> <frame src="content.html" name=announces>

27 </frameset> </frameset> </html> Η ετικϋτα Frameset Ζ εηηθέηα <frameset> νξίδεη πψο ζα ρσξηζηεί ην παξάζπξν ζε frames. Κάζε frameset νξίδεη έλα ζχλνιν απφ γξακκέο θαη ζηήιεο. Οη ηηκέο ησλ γξακκψλ/ζηήισλ θαζνξίδνπλ ην κέγεζνο ηεο πεξηνρήο ζηελ νζφλε πνπ ζα ρξεζηκνπνηήζεη θάζε frame. Η ετικϋτα Frame Ζ εηηθέηα <frame> νξίδεη πνην έγγξαθν HTML ζα εηζαρζεί ζε θάζε frame. ην παξάδεηγκα πνπ είδακε πξηλ δεκηνπξγήζακε έλα frameset κε δχν ζηήιεο. Ζ πξψηε ζα θαηαιακβάλεη ην 15% ηνπ παξαζχξνπ ηνπ θπιινκεηξεηή, ελψ ε δεχηεξε ην ππφινηπν. Σν έγγξαθν "sidebar.html" ζα κπεη ζηελ πξψηε ζηήιε, θαη ην "content.html" ζηελ δεχηεξε. εκεηψζηε φηη αλ ζειήζεηε λα εκπνδίζεηε ηνλ ρξήζηε λα αιιάμεη ην κέγεζνο ησλ frames(), κπνξείηε λα πξνζζέζεηε ηελ ιέμε noresize ζην frame πνπ ζέιεηε λα θιεηδψζεηε. Σέινο φπσο κπνξεί λα παξαηεξήζαηε ζην παξάδεηγκα, απνπζηάδεη ην ζηνηρείν <body>. Απηφ γίλεηαη γηαηί δελ κπνξεί λα ρξεζηκνπνηεζεί ην ζηνηρείν <body> καδί κε ην ζηνηρείν <frameset>.

28 Μνξθνπνίεζε CSS Τι εύναι το CSS? Σν CSS είλαη αθξψλπκν ησλ Cascading Style Sheets. Δλψ ε HTML δίλεη ζηηο ηζηνζειίδεο ηε βαζηθή δνκή, ην CSS (Cascading Style Sheets) θαζνξίδεη ηελ εκθάληζή ηνπο. Τι εύναι ϋνα Style Sheet; Έλα style sheet είλαη απιά έλα αξρείν θεηκέλνπ πνπ πεξηέρεη έλαλ ή πεξηζζφηεξνπο θαλφλεο πνπ θαζνξίδνπλ πψο ζα εκθαλίδνληαη νξηζκέλα ζηνηρεία ηεο ηζηνζειίδαο. Ο CSS θψδηθαο κπνξεί λα βξίζθεηαη ζε μερσξηζηφ αξρείν θαη κπνξείηε λα ζπλδέζεηε ην αξρείν απηφ κε έλα HTML αξρείν, έηζη ψζηε λα αιιάμεηε εχθνια ηελ εκθάληζή ηνπ. Ο θψδηθαο CSS κπνξεί θαη λα εκπεξηέρεηαη κέζα ζην HTML αξρείν, φηαλ απνηειείηαη απφ ιίγεο κφλν γξακκέο. Πώσ εύναι η δομό των κανόνων μορφοπούηςη; Έλαο θαλφλαο κνξθνπνίεζεο απνηειείηαη απφ έλαλ επηινγέα (ν νπνίνο θαζνξίδεη πνηα ζηνηρεία ζα κνξθνπνηεζνχλ) θαη κηα δήισζε (ε νπνία θαζνξίδεη ην είδνο ηεο κνξθνπνίεζεο πνπ ζα εθαξκνζηεί). Πνιιαπιά δεχγε ηδηνηήησλ/ηηκψλ ζηε δήισζε δηαρσξίδνληαη κε ην ειιεληθφ εξσηεκαηηθφ (;). h1{ color:red; background:yellow; } Ο επηινγέαο εδψ είλαη ην h1. Ίζσο έρεηε παξαηεξήζεη φηη ην <h1> είλαη ε εηηθέηα γηα ηελ επηθεθαιίδα (κέγηζηνπ κεγέζνπο). Έρνπκε επίζεο άιιεο δχν δειψζεηο, ηηο color:red θαη background:yellow. Ζ πξψηε δήισζε νξίδεη ην ρξψκα ηεο επηθεθαιίδαο (ρξψκα θεηκέλνπ) λα είλαη θφθθηλν θαη ε δεχηεξε νξίδεη ην ρξψκα ηνπ θφληνπ ηεο πεξηνρήο ηεο επηθεθαιίδαο λα είλαη θίηξηλε. Όηαλ πξνζζέζνπκε απηφλ ηνλ CSS θψδηθα ζε έλα HTML αξρείν, φπνηε δεκηνπξγνχκε κηα επηθεθαιίδα ρξεζηκνπνηψληαο ηελ εηηθέηα <h1>, ζα έρεη ηηο ηδηφηεηεο πνπ νξίδνληαη παξαπάλσ. Αληί γηα h1 ζα κπνξνχζακε λα ρξεζηκνπνηήζνπκε άιιεο εηηθέηεο, γηα παξάδεηγκα body, p θηι θαη λα ρξεζηκνπνηήζνπκε άιιεο δειψζεηο, γηα παξάδεηγκα font-family:arial; (αιιάδεη ηε γξακκαηνζεηξά ζε arial). Πώσ μπορώ να δημιουργόςω ϋνα External Style Sheet; Έλα External Style Sheet είλαη έλα CSS αξρείν, έλα αξρείν δειαδή πνπ πεξηέρεη CSS θψδηθα φπσο απηφο πνπ εμεγήζεθε ζην παξαπάλσ παξάδεηγκα. Ζ θαηάιεμε ησλ CSS αξρείσλ είλαη.css. Απηά ηα αξρεία κπνξνχλ λα ζπλδεζνχλ κε HTML ζειίδεο θαζνξίδνληαο ηελ θαηάιιειε <link> εηηθέηα κέζα ζηελ <head> εηηθέηα ηεο HTML ζειίδαο, θάπσο έηζη:

29 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head><br> Αλ πξνζζέζνπκε απηφλ ηνλ θψδηθα ζηελ HTML ζειίδα καο, ζα θνξηψζεη ηε κνξθνπνίεζε πνπ νξίδεηαη ζην mystyle.css αξρείν θαη ε εκθάληζε ηεο HTML ζειίδαο ζα αιιάμεη εχθνια. Μπνξείηε λα νλνκάζεηε ηα CSS αξρεία ζαο φπσο ζέιεηε. Δδψ, φπσο βιέπεηε, νλνκάδεηαη mystyle.css θαη βξίζθεηαη ζηνλ ίδην θάθειν κε ην HTML αξρείν καο. Πώσ μπορώ να δημιουργόςω ϋνα Internal Style Sheet; Έλα internal style sheet ζα κπνξνχζε λα ρξεζηκνπνηεζεί γηα θάπνην ζπγθεθξηκέλν αξρείν πνπ έρεη κνλαδηθή δνκή. Μπνξείηε λα νξίζεηε internal styles ζην ηκήκα head ρξεζηκνπνηψληαο ηελ εηηθέηα <style>, θάπσο έηζη: <head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> Ωο άζθεζε πξνζπαζήζηε λα κνξθνπνηήζεηε ην HTML έγγξαθν θάπσο έηζη:

30 Φόξκεο Πώσ μπορώ να δημιουργόςω μια απλό φόρμα; Μηα θφξκα είλαη απιά κηα πεξηνρή πνπ πεξηέρεη πεδία θφξκαο. Σα πεδία θφξκαο είλαη αληηθείκελα πνπ επηηξέπνπλ ζηνλ επηζθέπηε λα εηζάγεη πιεξνθνξία γηα παξάδεηγκα θνπηηά θεηκέλνπ, κελνχ θαη θνπκπηά ξάδην. πρλέο εθαξκνγέο ησλ θνξκψλ είλαη έξεπλεο, παξαγγειίεο, ή νπνηαδήπνηε ηζηνζειίδα πξνυπνζέηεη εηζαγσγή πιεξνθνξίαο απφ ηνλ ρξήζηε πξνθεηκέλνπ λα πξαγκαηνπνηήζεη θάπνηα εθαξκνγή ή λα παξέρεη θάπνηα ππεξεζία ζηνλ ρξήζηε. Απηφο είλαη ν ηξφπνο δεκηνπξγίαο κηαο απιήο θφξκαο: Πυρ μποπώ να δημιοςπγήζυ παδιοπλήκηπα?(radio button) Σα ξαδηνπιήθηξα ρξεζηκνπνηνχληαη φπνηε ζέινπκε λα επηιέμεη ν ρξήζηεο κφλν κηα απφ φιεο ηηο δπλαηέο επηινγέο. Σα ξαδηνπιήθηξα έρνπλ φια ην ίδην εζσηεξηθφ φλνκα ζηνλ θψδηθα ΖΣML δειαδή ίδηα ηηκή ζηελ ηδηφηεηα name. ην παξαθάησ ζρήκα παξνπζηάδεηαη ν ηξφπνο δεκηνπξγίαο ξαδηνπιήθηξσλ:

31 Πυρ μποπώ να δημιοςπγήζυ πλαίζια ελέγσος?( Checkbox) Σα πιαίζηα ειέγρνπ ρξεζηκνπνηνχληαη φπνηε ζέινπκε λα επηιέμεη ν ρξήζηεο κηα ή πεξηζζφηεξεο απφ φιεο ηηο δπλαηέο επηινγέο. Όπσο θαη ηα ξαδηνπιήθηξα, ηα πιαίζηα ειέγρνπ ζπλδένληαη κεηαμχ ηνπο κέζσ ηεο ηηκήο ηεο ηδηφηεηαο name. ην παξαπάησ ζρήκα παξνπζηάδεηαη ν ηξφπνο δεκηνπξγίαο πιαηζίσλ ειέγρνπ:

32 Πυρ μποπώ να δημιοςπγήζυ μενού καηάδςζηρ?( drop down menu) Σα κελνχ θαηάδπζεο είλαη φηη πξέπεη γηα λα επηηξέπεηε ζηνπο επηζθέπηεο ζαο λα δηαιέγνπλ αλάκεζα ζε έλα δεδνκέλν ζχλνιν επηινγψλ. Αλ έρεηε θάπνην ηδηαίηεξα κεγάιν κελνχ κε πνιιέο επηινγέο κπνξεί λα ζειήζεηε λα νκαδνπνηήζεηε ηηο επηινγέο ζε θαηεγνξίεο(ππν-κελνχ). ην παξαθάησ ζρήκα παξνπζηάδεηαη ν ηξφπνο δεκηνπξγίαο κελνχ θαηάδπζεο:

33 Πνιπκέζα Πώσ μπορώ να προςθϋςω μια εικόνα ςτην ιςτοςελύδα μου; Αο ππνζέζνπκε φηη έρνπκε ην αξρείν εηθφλαο "cat.jpg" θαη ζέινπκε λα ην βάινπκε ζηελ ηζηνζειίδα καο. Γηα λα ην θάλνπκε απηφ, ρξεζηκνπνηνχκε ηελ εηηθέηα <img> νπνπδήπνηε κέζα ζηελ HTML ζειίδα ζέινπκε λα εκθαληζηεί απηή ε εηθφλα. Ο θψδηθαο, ζηε πην απιντθή ηνπ κνξθή, είλαη ν εμήο: <img src="cat.jpg"> Ζ κφλε πξνυπφζεζε γηα λα δνπιέςεη απηφο ν θψδηθαο είλαη λα έρνπκε κηα εηθφλα κε φλνκα "cat.jpg" ζηνλ ίδην θάθειν κε ηελ HTML ζειίδα. Αλ ε εηθφλα είλαη ζε δηαθνξεηηθφ θάθειν, γξάθνπκε θαη ην κνλνπάηη καδί κε ην φλνκα ηνπ αξρείνπ, γηα παξάδεηγκα αλ ην έρνπκε ζε έλαλ θάθειν κε φλνκα "images", φ θψδηθαο ζα ήηαλ: <img src="images/cat.jpg"/> Πώσ μπορώ να αλλϊξω το μϋγεθοσ τησ εικόνασ; Καζνξίδνληαο ηηο ηηκέο ησλ ηδηνηήησλ "height" θαη "width", κπνξνχκε λα αιιάμνπκε ην κέγεζνο ηεο εηθφλαο ζηελ ηζηνζειίδα καο. Γηα λα ηξνπνπνηήζνπκε απηέο ηηο ηδηφηεηεο, απιά πξνζζέζηε ηηο ζηνλ θψδηθα ηεο εηηθέηαο <img>: <img src="cat.jpg" width="48" height="48" /> Ζ ηηκή 48 κεηξάηαη ζε pixels (ην κηθξφηεξν δηαθξηηφ ζηνηρείν ηεο νζφλεο). Αληί λα δψζνπκε έλα ζηαζεξφ κέγεζνο, κπνξνχκε λα δψζνπκε έλα πνζνζηφ ηεο νζφλεο πνπ ζέινπκε λα θαηαιακβάλεη ε εηθφλα, γηα παξάδεηγκα: <img src="cat.jpg" width="50%" height="50%" /> Πώσ μπορώ να ςτοιχύςω εικόνεσ; Ζ ζηνίρηζε ησλ εηθφλσλ κπνξεί λα θαλεί πνιχ ρξήζηκε, εηδηθά φηαλ ζπλδπάδνπκε εηθφλεο κε θείκελν. Απηφ πνπ έρνπκε λα θάλνπκε είλαη λα πξνζζέζνπκε κηα παξαπάλσ ηδηφηεηα γηα ηελ ζηνίρηζε, ηελ ηδηφηεηα align: <img src="cat.jpg" width="113" height="154" align="bottom" />

34 Απηή ε ηδηφηεηα κπνξεί λα πάξεη δηάθνξεο ηηκέο, θάζε κηα απφ ηηο νπνίεο θαζνξίδεη ηε ζηνίρηζε ηεο εηθφλαο, φπσο νξίδεηαη απφ ην φλνκα θαη ηελ ηηκή. Οη ηηκέο κπνξεί λα είλαη: "top", "middle", "bottom", left", "center", "right". Πώσ μπορώ να χρηςιμοποιόςω μια εικόνα ςαν φόντο τησ ιςτοςελύδασ; Απηφ δηαθέξεη ιίγν απφ φηη έρνπκε δεη σο ηψξα, γηαηί γηα λα ζέζνπκε κηα εηθφλα ζαλ θφλην δελ αιιάδνπκε ηηο ηδηφηεηεο ηεο εηηθέηαο (<img>), αιιά αιιάδνπκε ηελ εηηθέηα (<body>). Απηφ έρεη λφεκα, γηαηί ε εηηθέηα <body> θαζνξίδεη ην θχξην ζψκα ηεο ηζηνζειίδαο. Έηζη, γηα λα ζέζνπκε κηα εηθφλα λα είλαη θφλην ηεο ηζηνζειίδαο, θάλνπκε ηα εμήο: <body background="background.jpg"> Παξαηεξήζηε φηη ν πξνθαζνξηζκέλνο ηξφπνο κε ηνλ νπνίν ν θπιινκεηξεηήο εκθαλίδεη ηελ εηθφλα είλαη κε ην αξρηθφ ηεο κέγεζνο, έηζη, αλ πξφθεηηαη γηα κηα κηθξή εηθφλα, ζα ηελ επαλαιάβεη δεκηνπξγψληαο ην εθέ ηαπεηζαξίαο. Πώσ μπορώ να ενςωματώςω ϊλλουσ τύπουσ πολυμϋςων ςτην ιςτοςελύδα μου; Μπνξνχκε λα πξνζζέζνπκε δηάθνξνπο ηχπνπο πνιπκέζσλ ζηελ ηζηνζειίδα κε ηξφπν παξφκνην απηνχ ηεο πξνζζήθεο εηθφλσλ. Αληί λα ρξεζηκνπνηήζνπκε ηελ εηηθέηα <img>, πνπ ρξεζηκνπνηείηαη κφλν γηα εηθφλεο, κπνξνχκε λα ρξεζηκνπνηήζνπκε ηελ εηηθέηα <object>, πνπ είλαη πην γεληθή. Απηφ πνπ έρνπκε λα θάλνπκε είλαη λα νξίδνπκε ηνλ ηχπν ηνπ πνιπκέζνπ ζηνλ νπνίν αλήθεη απηφ ην αληηθείκελν. Πώσ μπορώ να προςθϋςω όχο ςτην ιςτοςελύδα μου; Παξάδεηγκα: <object type="audio/x-mpeg" data="yoursound.mp3"></object> Με ηελ ηδηφηεηα type="audio/x-mpeg" νξίδνπκε φηη ην αληηθείκελν πνπ ζα πξνβιεζεί απφ ηνλ θπιινκεηξεηή είλαη αξρείν ήρνπ θαη ρξεζηκνπνηεί ηε ζπκπίεζε mpeg (mp3). Με ηελ ηδηφηεηα data="yoursound.mp3" νξίδνπκε ην φλνκα ηνπ αξρείνπ ήρνπ (εδψ ρξεζηκνπνηνχκε έλα αξρείν ηχπνπ mp3). Πώσ μπορώ να προςθϋςω βύντεο ςτην ιςτοςελύδα μου; Παξάδεηγκα:

35 <object data="test.mpg" type="video/mpeg" width="320" height="255"></object> Με ηελ ηδηφηεηα type="video/mpeg" νξίδνπκε φηη ην αληηθείκελν πνπ ζα πξνβιεζεί απφ ηνλ θπιινκεηξεηή είλαη αξρείν video θαη ρξεζηκνπνηεί ηε ζπκπίεζε mpeg. Με ηελ ηδηφηεηα data="test.mpg" νξίδνπκε ην φλνκα ηνπ αξρείνπ ήρνπ (εδψ ρξεζηκνπνηνχκε έλα αξρείν ηχπνπ mpg). Σα height θαη width θαζνξίδνπλ ην κέγεζνο ηνπ βίληεν κέζα ζηελ ηζηνζειίδα.

36 Δξσηήζεηο Αμηνιόγεζεο 1. What does HTML stand for? A. Hyperlinks and Text Markup Language B. Hyper Text Markup Language C. Home Tool Markup Language 2. Choose the correct HTML tag for the largest heading? A. <h6> B. <heading> C. <head> D. <h1> 3. What is the correct HTML for creating a hyperlink? A. <a href=" B. <a url=" C. <a> D. <a name=" 4. Which of these tags are all <table> tags? A. <table><head><tfoot> B. <table><tr><td> C. <table><tr><tt> D. <thead><body><tr> 5. What is the correct HTML for inserting an image? A. <img src="image.gif"/> B. <img href="image.gif/> C. <image src="image.gif"/> D. <img>image.gif</img> 6. Where in an HTML document is the correct place to refer to an external style sheet? A. In the <body> section B. At the top of the document C. In the <head> section D. At the end of the document

37 7. Which tag is used to create a bulleted list? A. <ol> B. <il> C. <bullet> D. <ul> 8. Which tags are used to add rows to your tables? A. <td> and </td> B. <cr> and </cr> C. <th> and </th> D. <tr> and </tr> 9. Which input type would allow a reader to select several options from a list of possibilities? A. radio B. checkbox C. textbox D. form 10. Cascading style sheets file's name should end with A..xml B..css C..ccs D..html

38 Server-Side Scripting ε απηφ ην θεθάιαην ζα δνχκε πσο κπνξνχκε λα δεκηνπξγήζνπκε δπλακηθέο ηζηνζειίδεο πνπ κπνξνχλ λα επηθνηλσλνχλ κε βάζεηο δεδνκέλσλ. Οινθιεξψλνληαο απηφ ην θεθάιαην ζα κπνξείηε λα: Να εμεγήζεηε ηνπο βαζηθνχο κεραληζκνχο ηνπ server side scripting θαη ηεο γιψζζαο PHP Να δεκηνπξγήζεηε κηα απιή βάζε δεδνκέλσλ. Δπίπεδν Γπζθνιίαο: Πξνρσξεκέλν Χξόλνο εθκάζεζεο: 1 ψξα

39 Δηζαγσγή ζην ηξόπν ιεηηνπξγίαο ηνπ Server Side Scripting Τι εύναι το Server Side Scripting? Σν Server-side scripting (SSS) είλαη κία ηερλνινγία πνπ ρξεζηκνπνηείηαη ζηνπο servers πξνθεηκέλνπ νη απαηηήζεηο-αλάγθεο ησλ ρξεζηψλ γηα πιεξνθνξίεο θαη δεδνκέλα λα θαιχπηνληαη απφ θάπνηα θαηάιιεια ππνπξνγξάκκαηα πνπ ηξέρνπλ νη servers. Με απηφλ ηνλ ηξφπν ην SSS δεκηνπξγεί δπλακηθέο ζειίδεο πνπ λα κπνξνχλ λα επηθνηλσλνχλ κε βάζεηο δεδνκέλσλ. What is the aim of Server Side Scripting? Σν Server-side scripting έρεη λα θάλεη κε ηνλ πξνγξακκαηηζκφ ηεο «ζπκπεξηθνξάο» ηνπ server. Ο server κπνξεί λα αιιάδεη δπλακηθά ην πεξηερφκελν κηαο ηζηνζειίδαο πξνζζέηνληαο θαη αιιάδνληαο πιεξνθνξίεο. Πξφθεηηαη δειαδή γηα έλα «εξγαιείν» ην νπνίν πξνζθέξεη ζηνλ server ηε δπλαηφηεηα λα ηξέρεη ππνπξνγξάκκαηα(scripts) θαη δεκηνπξγεί δπλακηθέο ζειίδεο. Δπίζεο ρξεζηκνπνηείηαη επξέσο ζηελ δεκηνπξγία αιιειεπηδξαζηηθψλ ηζηνζειίδσλ πνπ λα κπνξνχλ λα αιιειεπηδξνχλ κε ηνπο επηζθέπηεο/ρξήζηεο. Πωσ λειτουργεύ το Servers Side Scripting? Όηαλ έλαο ρξήζηεο ζειήζεη λα επηζθεθηεί κία ηζηνζειίδα, ν server ηνπ επηζηξέθεη ηελ ζειίδα απηή, αιιά αλ ε ζειίδα απηή πεξηέρεη θάπνην script ηφηε ν server αλαιακβάλεη λα εθηειέζεη ην script απηφ θαη ζηελ ζπλέρεηα λα επηζηέςεη ηελ ζειίδα ζηνλ browser ηνπ ρξήζηε ζε απιή ΖΣΜL κνξθή. Γηα παξάδεηγκα ν server κπνξεί λα αληαπνθξηζεί ζηηο πιεξνθνξηαθέο αλάγθεο πνπ ζηέιλεη ν ρξήζηεο, λα ςάμεη ζηηο θαηάιιειεο βάζεηο δεδνκέλσλ λα βξεη θαη λα επηζηξέςεη ηα δεδνκέλα πνπ δεηήζεθαλ.

40 Τι τεχνολογύεσ/γλώςςεσ προγραμματιςμού? Μεξηθέο απφ ηηο πην γλσζηέο γιψζζεο πξνγξακκαηηζκνπ πνπ ρξεζηκνπνπνχληαη είλαη νη αθφινπζεο: ASP - ASP.NET ColdFusion Markup Language Java via JavaServer Pages PHP Perl Python SQL

41 Δηζαγσγή ζηελ γιώζζα πξνγξακκαηηζκνύ PHP Εισαγωγή στην PHP Σα αξρηθά PHP πξνέξρνληαη απφ «PHP: Hypertext Preprocessor».Ζ PHP πξφθεηηαη γηα κηα γιψζζα πξνγξακκαηηζκνχ πνπ ρξεζηκνπνηείηαη γηα ηελ δεκηνπξγία δπλακηθψλ θαη αιιειεπηδξαζηηθψλ ηζηνζειίδσλ. Ο θψδηθαο PHP βξίζθεηαη κέζα ζηελ ίδηα ηελ ηζηνζειίδα καδί κε ηνλ θψδηθα ΖΣΜL αιιά, ζε αληίζεζε κε ηνλ HTML θψδηθα, εθηειείηαη απνθιεηζηηθά απφ ηνλ server θαη φρη απφ ηνλ ρξήζηε. ηνλ ρξήζηε επηζηξέθνληαη ηα απνηειέζκαηα ηεο εθηέιεζεο ηνπ. Έηζη ν θψδηθαο PHP δελ ζηέιλεηαη ζηνλ ρξήζηε. O server αλαιακβάλεη λα εθηειέζεη ηα δηάθνξα PHP θνκκάηηα πνπ πεξηέρεη κηα ηζηνζειίδα θαη ζηελ ζπλέρεηα λα επηζηξέςεη ηελ ηζηνζειίδα θαη ηα απνηειέζκαηα ζηνλ ρξήζηε. Πωσ λειτουργεύ η PHP? Ζ γιψζζα PHP δίλεη ηελ δπλαηφηεηα ζηνλ server λα θάλεη πνιχ πεξηζζφηεξα απφ ην λα επηζηξέθεη κφλν απιέο ζειίδεο ζηνπο ρξήζηεο. Ο server κπνξεί γηα παξάδεηγκα λα εθηειεί πνιχπινθνπο ππνινγηζκνχο, λα ρξεζηκνπνηεί βάζεηο δεδνκέλσλ γηα λα βξεη ηηο δηάθνξεο πιεξνθνξίεο πνπ δεηήζεθαλ απφ ηνλ ρξήζηε θαη άιια. Σα θνκκάηηα ηνπ θψδηθα PHP πνπ βξίζθνληαη κέζα ζηελ ηζηνζειίδα νλνκάδνληαη scripts. H HTML ρξεζηκνπνηείηαη γηα λα δεκηνπξγεί θαη λα δηακνξθψλεη ηζηνζειίδεο. Μ ε ηελ πξνζζήθε ηεο PHP κπνξνχκε λα ζπιιέγνπκε δεδνκέλα απφ ηνπο ρξήζηεο, λα δεκηνπξγνχκε δπλακηθέο ζειίδεο θάηη πνπ δελ κπνξεί λα θάλεη ε HTML απφ κφλε ηεο. Πώσ δομεύται ο κώδικασ PHP? Παρουςύαςη ενόσ παραδεύγματοσ. Μέζα ζε κία ηζηνζειίδα ΖΣΜΛ, ν ΠΖΠ θψδηθαο βξίζθεηαη εληφο εηδηθψλ tags. Ο PHP θψδηθαο μεθηλάεη κε <?php θαη ηειεηψλεη?>.

42 Όηαλ ν ρξήζηεο δεηήζεη κηα ηζηνζειίδα, server ηξέρεη ηνλ θψδηθαο πνπ PHP πνπ πεξηέρεηαη εληφο ησλ tags απηψλ, θαη ζηελ ζπλέρεηα επηζηέςεη ηα απνηειέζκαηα θαη ηνλ HTML ρξήζηε. PHP και βϊςεισ δεδομϋνων. Μηα απφ ηηο βαζηθφηεξεο δπλαηφηεηεο πνπ πξνζθέξεη ε PHP είλαη ε επθνιία κε ηελ νπνία κπνξεί λα δηαρεηξηζηεί πιεξνθνξίεο απφ βάζεηο δεδνκέλσλ. Μέζσ ηεο PHP κπνξνχκε λα απνζεθεχζνπκε ζε βάζεηο δεδνκέλσλ πιεξνθνξίεο πνπ ζηέιλνπλ νη ρξήζηεο ε αληηζηνίρσο λα βξνχκε θαη λα ηνπο επηζηέςνπκε ρξήζηκεο πιεξνθνξίεο πνπ ςάρλνπλ. Ζ PHP έρεη ηελ δπλαηφηεηα λα κπνξεί λα επηθνηλσλεί κε δηάθνξα ζπζηήκαηα βάζεσλ δεδνκέλσλ φπσο: MySQL Oracle MSSQL Interbase Καη άιια πνιιά.

43 Δηζαγσγή ζηηο βάζεηο δεδνκέλσλ Τι εύναι μια βϊςη δεδομϋνων? Μια βάςθ δεδομζνων είναι μια οργανωμζνθ ςυλλογι από πλθροφορίεσ, δομθμζνθ με τζτοιο τρόπο ϊςτε να είναι εφκολθ θ προςπζλαςθ των πλθροφοριϊν τθσ. Η βάςθ δεδομζνων αποτελείται από επιμζρουσ πίνακεσ(tables),κάκε ζνα από τα οποία ζχει αποκθκευμζνεσ εγγραφζσ με πλθροφορίεσ. Κάκε πίνακασ(table) αποτελείται από πεδία, τα οποία περιζχουν τθν ατομικι πλθροφορία για κάκε χαρακτθριςτικό τθσ εγγραφισ. Επίςθσ κάκε πίνακασ(table) ζχει ζνα μοναδικό. Στο παρακάτω ςχιμα παρουςιάηεται ζνα παράδειγμα τραπεηιοφ. Τι εύναι η SQL? Η γλϊςςα SQL (Structured Query Language) είναι τυποποιθμζνθ γλϊςςα προγραμματιςμοφ για τθν πρόςβαςθ και διαχείριςθ δεδομζνων ςε βάςεισ δεδομζνων. Συνοπτικά θ SQL προςδιορίηει τον τρόπο με τον οποίο μποροφμε να ζχουμε πρόςβαςθ ςε μια βάςθ δεδομζνων, να εκτελοφμε αναηθτιςεισ με κριτιρια, να ειςάγουμε νζα δεδομζνα, να διαγράψουμε υπάρχοντα δεδομζνα να κάνουμε αλλαγζσ ςε υπάρχοντα δεδομζνα. Εντελζσ SQL χρθςιμοποιοφνται για τθν επιλογι, τθν ειςαγωγι, τθν ανανζωςθ δεδομζνων από μια βάςθ δεδομζνων, και επίςθσ θ SQL ζχει παρακυρικό περιβάλλον Πωσ μπορώ να δημιουργόςω μια απλό MySQL βϊςη δεδομϋνων? Στισ μζρεσ μασ, ςφγχρονα ςφςτθμα διαχείριςθσ περιεχομζνου όπωσ το Joomla ην Moodle είλαη δπλακηθά θαη ζηφρνο ηνπο είλαη λα απνζεθεχζνπλ άξζξα, εηθφλεο, βίληεν θηι. Πξνθεηκέλνπ λα ππάξρεη νξγάλσζε ζηελ απνζήθεπζε ησλ δεδνκέλσλ θαη λα γίλεη γξήγνξε ε πξνζπέιαζή ηνπο ηα ζπζηήκαηα απηά ρξεζηκνπνηνχλ MySQL βάζεηο. Οη MySQL βάζεηο απνηεινχληαη απφ πίλαθεο(tables) θαη ζε θάζε πίλαθα απνζεθεχεηαη ζπγθεθξηκέλε πιεξνθνξία. Στο παρακάτω ςχιμα παξνπζηάδεηαη ε δνκή κηαο MySQL βάζεο δεδνκέλσλ. Σν φλνκα ηεο βάζεο είλαη bookstore θαη απνηειείηαη απφ ηξεηο πίλαθεο (tables).

44 Υπάρχουν πολλοί τρόποι για να δθμιουργιςουμε μια MySQL βάζε δεδνκέλσλ. O πην γξήγνξνο θαη πην εχθνινο είλαη κε ην εξγαιείν PHPMyAdmin. Στο παρακάτω ςχιμα παρουςιάηεται πιο αναλυτικά ζνα τραπζηι(table) τθσ MySQL βάςθσ δεδομζνων μασ. Κάκε πίλαθαο αποτελείται από γραμμζσ και ςτιλεσ. Οι ςτιλεσ προςδιορίηουν το είδοσ τθσ πλθροφορίασ. Η ίδια θ πλθροφορία αποκθκεφεται ςτισ γραμμζσ του πίλαθα. O παραπάνω πίλαθα ζχει όνομα book και αποκθκεφει πλθροφορίεσ για τα χαρακτθριςτικά βιβλίων. Στο παρακάτω ςχιμα παξνπζηάδνληαη ηα βηβιία πνπ είλαη απνζεθεπκέλα ζηελ βάζε δεδνκέλσλ καο:

45 SQL ερωτόματα και διαχεύριςη δεδομϋνων. Ζ επηθνηλσλία κε ηελ βάζε δεδνκέλσλ καο θαη πην ζπγθεθξηκέλα ε πξνζπέιαζε ησλ πιεξνθνξηψλ ελφο πίλαθα (table) γίλεηαη κέζσ εξσηεκάησλ SQL. Σα εξσηήκαηα SQL ρξεζηκνπνηνχληαη γηα λα αλνίμνπλ κηα επηθνηλσλία κε ηελ βάζε δεδνκέλσλ, λα βξνπλ ην θαηάιιειν πίλαθα (table),θαη λα ηξνπνπνηήζνπλ ηηο ζπγθεθξηκέλεο εγγξαθέο. Γηα παξάδεηγκα, ε αθφινπζε SQL δήισζε δηαιέγεη φιεο ηηο εγγξαθέο πνπ ππάξρνπλ ζην πίλαθα Persons SELECT * FROM Persons Μπνξνχκε λα εηζάγνπκε, λα ελεκεξψζνπκε ή λα δηαγξάςνπκε δεδνκέλα απφ έλα πίλαθα κε ρξήζε SQL δειψζεσλ. Σν πην ζεκαληηθφ είλαη φηη ε δηαρείξηζε θαη ε ηξνπνπνίεζε ησλ δεδνκέλσλ κπνξεί λα γίλεη κέζσ κηαο ηζηνζειίδαο κε ηελ βνήζεηα ηεο PHP. HTML, PHP και βϊςεισ δεδομϋνων. Ο επηζθέπηεο κηαο ηζηνζειίδαο κπνξεί λα αιιειεπηδξάζεη κέζσ ηνπ θπιινκεηξεηή ηνπ. Όηαλ ζπκπιεξψζεη ηα πεδία ησλ θνξκψλ(forms) ηεο ηζηνζειίδαο θαη παηήζεη ην θνπκπί απνζηνιή, νη πιεξνθνξίεο απνζηέιινληαη ζηνλ εμππεξεηεηή(server) θαη ζηελ ζπλέρεηα γίλνληαη εξσηήκαηα ζηελ βάζε δεδνκέλσλ πνπ πεξηέρεη ηα απαηηνχκελα δεδνκέλα απνηειέζκαηα ζηελ ζπλέρεηα επηζηξέθνληαη ζηνλ θπιινκεηξεηή ηνπ ρξήζηε. Σέηνηεο ηζηνζειίδεο αλαπηχζζνληαη ζπλήζσο ζε HTML, PHP θαη SQL.

46 Δξσηήζεηο Αμηνιόγεζεο 1.What does PHP stand for? A. PHP: Hypertext Preprocessor B. Personal Hypertext Processor C. Personal Home Page D. Private Home Page 2.Which of the following statement about PHP is FALSE? A. PHP is a web scripting language B. PHP is a client side language C. PHP is server-side scripting language that allows you to generate dynamic websites D. All the Above 3.What tags are used to start and end your PHP code? A. <?php>...</?> B. <?php.. <p?> C. <php>...</php> D. <script>...</script> 4.How do you write "Hello World" in PHP? A. "Hello World"; B. print "Hello World"; C. echo "Hello World"; D. write "Hello World" 5.Which SQL statement is used to extract data from a database? E. SELECT F. GET G. EXTRACT H. OPEN 6.With SQL, how do you select a column named "FirstName" from a table named Persons"? A. EXTRACT FirstName FROM Persons B. SELECT FirstName FROM Persons C. SELECT Persons.FirstName D. ACCESS FirstName FROM Persons

47 Σπζηήκαηα Γηαρείξηζεο Πεξηερνκέλνπ ε απηφ ην ηκήκα, ζα δνχκε πψο κπνξνχκε λα δεκηνπξγήζνπκε ζειίδεο πνπ νξγαλψλνπλ ζειίδεο καζεκάησλ, ρξεζηκνπνηψληαο εμεηδηθεπκέλα γηα απηφλ ην ζθνπφ ζπζηήκαηα, φπσο είλαη ην Moodle. Οινθιεξψλνληαο απηήλ ηελ ελφηεηα ζα κπνξείηε να δθμιουργιςετε ζνα μάκθμα με το Moodle να γραφτείτε ςε ζνα μάκθμα να προςκζςετε περιεχόμενα ςτο μάκθμα να δθμιουργιςετε ζνα forum για το μάκθμα να δθμιουργιςετε ζνα wiki για το μάκθμα Δπίπεδν: Μέηξην Δθηηκώκελνο ρξόλνο: 2 ψξεο

48 Δηζαγσγή Τι εύναι ϋνα Σύςτημα Διαχεύριςησ Περιεχομϋνου; Σν Γηαδίθηπν είλαη έλα εξγαιείν δηακνηξαζκνχ πιεξνθνξίαο. Γηα λα γίλεη δπλαηή ε εκθάληζε ηεο πιεξνθνξίαο (ή πεξηερνκέλνπ) ζε δηαθνξεηηθά κεραλήκαηα, νη άλζξσπνη επηλφεζαλ κηα γιψζζα, ηελ HTML, ε νπνία επηδείθλπε ζηα κεραλήκαηα πψο λα ηελ πξνβάινπλ. Απηφ ήηαλ θαιφ απφ ηελ πιεπξά ησλ κεραλεκάησλ. Απφ ηελ πιεπξά φκσο θάπνηνπ πνπ ήζειε λα κνηξαζηεί ηελ πιεξνθνξία, δελ ήηαλ ηφζν θαιφ γηαηί ρξεηαδφηαλ λα κάζνπλ ηελ HTML έηζη ψζηε λα δεκνζηεχζνπλ ηελ πιεξνθνξία ηνπο. Σα πζηήκαηα Γηαρείξηζεο Πεξηερνκέλνπ (ΓΠ) αλαπηχρζεθαλ έηζη ψζηε λα επηιχζνπλ απηφ ην πξφβιεκα. Έλα ΓΠ καο βνεζάεη λα δεκηνπξγήζνπκε θαη λα απνζεθεχζνπκε πεξηερφκελν ζε κία δηακνηξαδφκελε ηνπνζεζία ρσξίο λα ρξεηάδεηαη λα γλσξίδνπκε HTML ή άιιεο γιψζζεο. Τι εύναι το Moodle? Σν Moodle είλαη ην αθξψλπκν γηα Modular Object-Oriented Dynamic Learning Environment. Δίλαη έλα online ζχζηεκα δηαρείξηζεο πιεξνθνξίαο πνπ ζρεδηάζηεθε γηα λα δεκηνπξγήζεη δπλαηφηεηεο πινχζηαο δηαδξαζηηθφηεηαο κεηαμχ θαζεγεηψλ θαη καζεηψλ. Αο αξρίζνπκε ηελ εηζαγσγή ζην Moodle - ηη είλαη, πνηά είλαη ηα θχξηα ραξαθηεξηζηηθά ηνπ, ε ζθέςε πίζσ απφ απηφ θαη θάπνηα γεγνλφηα ηνπ θφζκνπ ηνπ Moodle. Πώσ να κατεβϊςετε και να εγκαταςτόςετε το Moodle ςτον web server ςασ? Σν Moodle είλαη έλα δσξεάλ ινγηζκηθφ. Απηφ ζεκαίλεη φηη ν θαζέλαο κπνξεί λα θαηεβάζεη έλα ζπκπηεζκέλν παθέην ηνπ Moodle απφ ηε δηεχζπλζε Μεηά κπνξείηε λα ην εγθαηαζηήζεηε ζηνλ server ζαο θαη λα ην ρξεζηκνπνηήζεηε. ε πεξίπησζε πνπ ζπλαληήζεηε πξνβιήκαηα, κπνξείηε λα αλαθεξζείηε ζην

49 Γλσξίδνληαο θαιύηεξα ην Moodle Πώσ να δημιουργόςετε ϋνα μϊθημα με το Moodle? Βήμα 1. Μεηά απφ ηελ επηηπρή ζχλδεζή ζαο ζηελ ηζηνζειίδα ζαο, θάληε θιηθ ζην Add a new course. ρήκα 1. Βήμα 2. Τϊρα μπορείτε να επεξεργαςτείτε τισ παραμζτρουσ του μακιματοσ που κζλετε να δθμιουργιςετε. Γράψτε το όνομα του μακιματοσ και μια ςυντομογραφία του. Γράψτε μια ςφντομθ περιγραφι του μακιματοσ.

50 ρήκα 2. Βήμα 3. Αλλάξτε τθ διαμόρφωςθ (format) ςε Topics format. Όπωσ κα δείτε υπάρχουν πολλζσ επιλογζσ, αλλά οι πιο διαδεδομζνεσ είναι οι Weekly και Topics format. Αν δεν είςτε ςίγουροι ποιά είναι θ καταλλθλότερθ επιλογι για εςάσ, κάντε κλικ ςτο κουμπί Help (κίτρινο ερωτθματικό ςτα αριςτερά) για μια περιγραφι. ρήκα 3. Βήμα 4. Τϊρα κοιτάξτε το τμιμα Enrolments. Η προεπιλεγμζνθ επιλογι είναι Internal Enrolment. Αυτό ςθμαίνει ότι όταν ζνασ μακθτισ κάνει κλικ πάνω ςτο όνομα του μακιματοσ, το ςφςτθμα αυτόματα κα τον/τθν ρωτιςει αν κζλει να εγγραφεί ςτο μάκθμα. Μπορείτε επίςθσ να κζςετε ζνα μάκθμα ωσ not enrollable (και να προςκζςετε εςείσ μακθτζσ αργότερα) ι να κζςετε για πόςο καιρό το μάκθμα κα είναι διακζςιμο για εγγραφζσ. Για τθν ϊρα μθν κάνετε αλλαγζσ. Θυμθκείτε ότι πάντα μπορείτε να επιςτρζφετε πίςω.

51 ρήκα 4. Βήμα 5. Κάντε κλικ ςτο Save changes. (Μθ φοβθκείτε να πειραματιςτείτε με οποιεςδιποτε επιλογζσ ςασ φαίνονται χριςιμεσ). ρήκα 5. Βήμα 6. Στθν επόμενθ ςελίδα, μπορείτε να επιλζξετε ρόλουσ για το μάκθμά ςασ. Παρατθρείςτε ότι δεν υπάρχουν κακθγθτζσ για το μάκθμα. Κάντε κλικ ςτθν επιλογι Teacher ςτθ ςτιλθ Roles.

52 ρήκα 6. Βήμα 7. Επιλζξτε τον εαυτό ςασ από τθ λίςτα των πικανϊν κακθγθτϊν (ςτθν περίπτωςι ςασ θ λίςτα κα είναι πολφ μεγαλφτερθ και ίςωσ χρειαςτεί να χρθςιμοποιιςετε το κουμπί Search παρακάτω), κάντε κλικ ςτο Add και μετά κάντε κλικ ςτο Assign roles in Course.

53 ρήκα 7a. ρήκα 7b. Βήμα 8. Τϊρα το προθγοφμενο ζχει αλλάξει. Μπορείτε να δείτε ότι υπάρχει ζνασ καινοφριοσ κακθγθτισ, ΕΣΕΙΣ!!! Κάντε κλικ ςτο Click here to enter your course (Σχ. 8).

54 ρήκα 8. Βήμα 9. Ζ αξρηθή ζειίδα ηνπ καζήκαηφο ζαο ζα εκθαληζηεί ζηελ νζφλε ζαο (ρ. 9). Πώσ να εγγρϊψω μαθητϋσ ςε ϋνα μϊθημα? ρήκα 9. Βήμα 1. Κάντε κλικ ςτο Settings ςτο τμιμα Administration κάτω αριςτερά ςτθν αρχικι ςελίδα του μακιματοσ (Σχ. 9). Βήμα 2. Επιςτρζψατε ςτο παράκυρο Settings (Σχ. 2). Μπορείτε να αλλάξετε πάλι, αν επικυμείτε, κάποιεσ επιλογζσ. Βήμα 3. Στο τμιμα Enrolments, κάντε το μάκθμα non enrollable (Σχ. 4). Κάντε κλικ ςτο Save changes (Σχ. 5). Βήμα 4. Κάντε κλικ ςτθν επιλογι Student ςτθ ςτιλθ Roles (Σχ. 6). Βήμα 5. Βρείτε τουσ μακθτζσ που κζλετε να προςκζςετε και πατιςτε το Add. Μετά κάντε κλικ ςτο Assign roles in Course (Σχ. 10).

55 ρήκα 10a.

56 ρήκα 10b. Βήμα 6. Μπορείτε να δείτε ότι τϊρα υπάρχουν εγγραμμζνοι μακθτζσ ςτο μάκθμα (Σχ. 11). Κάντε κλικ ςτο Click here to enter your course. ρήκα 11.

57 Βήμα 7. Κάληε θιηθ ζην Participants ζην ηκήκα People ζην πάλσ αξηζηεξά κέξνο ηεο αξρηθήο ζειίδαο ηνπ καζήκαηνο. Σψξα κπνξείηε λα δείηε φινπο φζνπο ζπκκεηέρνπλ ζην κάζεκα (ρ. 12). ρήκα 12.

58 Σχιμα 12b. Πώσ μπορώ να επεξεργαςτώ ϋνα μϊθημα; Βήμα 1. Πατιςτε το κουμπί Turn editing on ζην πάλσ δεμηά κέξνο ηεο αξρηθήο ζειίδαο ηνπ καζήκαηνο. Θα δείτε πλθκϊρα εικονιδίων, αλλά μθν ανθςυχείτε, κα δοφμε τι κάνει το κακζνα ξεχωριςτά (Σχ. 13).

59 Σχιμα 13a. Σχιμα 13b. Βήμα 2. Κάντε κλικ ςτο εικονίδιο Edit summary (χζρι με ςτυλό) λάτω από το Topic Outline. Γράψτε Welcome to the ODL course., κάντε το bold και πατιςτε Save changes (Σχ. 14).

60 ρήκα 14. Βήμα 3. Το κείμενο που γράψετε εμφανίηεται ςαν ετικζτα. Τϊρα κάντε κλικ ςτο εικονίδιο Move right (δεξί βζλοσ) δίπλα ςτο News forum. Το News forum μετακινείται λίγο προσ τα αριςτερά (Σχ. 15). Σχιμα 15a. Σχιμα 15b.

61 Βήμα 4. Κάντε κλικ ςτο εικονίδιο Move (πάνω/κάτω βζλοσ) δίπλα ςτο News forum. Θα εμφανιςτεί ζνα ςετ μικρϊν υποδοχϊν. Μπορείτε να μετακινιςετε το News forum ςτον υποδοχζα που κζλετε. Κάντε κλικ ςτον υποδοχζα του δεφτερου Topic. Το News forum ζχει μετακινθκεί (Σχ. 16). ρήκα 16a. ρήκα 16b.

62 Βήμα 5. Κάντε κλικ ςτο εικονίδιο Delete (μαφρο X) δίπλα ςτο News forum. Θα εμφανιςτεί ζνα προειδοποιθτικό μινυμα που κα ςασ ρωτάει αν κζλετε να επιβεβαιϊςετε τθν προθγοφμενθ ενζργειά ςασ. Η επιλογι φυςικά είναι δικι ςασ, αλλά πατιςτε No προσ το παρόν (Σχ. 17). ρήκα 17. Βήμα 6. Κάντε κλικ ςτο εικονίδιο Hide (μάτι) δίπλα ςτο News forum. Το News forum γίνεται γκρι (Σχ. 18). Αυτό ςθμαίνει ότι τϊρα το News forum δε κα είναι εμφανζσ ςτουσ μακθτζσ που ςυμμετζχουν ςτο μάκθμα. Αυτό μπορεί να είναι χριςιμο όταν ζχετε περιεχόμενο που δε κζλετε να είναι γενικά ορατό ι δεν είναι ακόμα ζτοιμο να δθμοςιευτεί. ρήκα 18. Βήμα 7. Κάντε κλικ ςτο κουμπί Turn editing off ςτθν πάνω δεξιά γωνία και επιςτρζψτε ςτθν αρχικι ςελίδα του μακιματοσ.

63 Πξόζζεζε πεξηερνκέλνπ Πώσ μπορώ να προςθϋςω ϋνα αρχεύο ςτο μϊθημα; Βήμα 1. Πατιςτε το κουμπί Turn editing on ςτθν πάνω δεξιά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ (Σχ. 19). ρήκα 19. Βήμα 2. Από το μενοφ Add a resource, επιλζξτε Link to a file or web site (Σχ. 20). ρήκα 20. Βήμα 3. Γράψτε το όνομα και μια ςφντομθ περιγραφι του αρχείου που κζλετε να προςκζςετε. Στο τμιμα Link to a file or web site, πατιςτε Choose or upload a file (Σχ. 21).

64 ρήκα 21. Βήμα 4. Παηήζηε Upload a file (ρ. 22). ρήκα 22.

65 Βήμα 5. Πατιςτε Browse και μετά βρείτε το αρχείο που κζλετε να προςκζςετε, ςαν να κζλατε να το επιςυνάψετε ςε ζνα . Πατιςτε Upload this file (Σχ. 23). ρήκα 23. Βήμα 6. Θα εμφανιςτεί μινυμα επιτυχίασ ανεβάςματοσ του αρχείου. Πατιςτε Choose τθ ςτιλθ Action δίπλα ςτο αρχείο (Σχ. 24).

66 ρήκα 24. Βήμα 7. Στο τμιμα Window, από το μενοφ, επιλζξτε New window. Πατιςτε Save and return to course (Σχ. 25). ρήκα 25.

67 Πώσ προςθϋτω υπερςύνδεςμο ςτο μϊθημα; Βήμα 1. Πατιςτε το κουμπί Turn editing on ςτθν πάνω δεξιά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ (Σχ. 19). Βήμα 2. Από το μενοφ Add a resource, επιλζξτε Link to a file or web site (Σχ. 20). Βήμα 3. Γράψτε το όνομα και μια ςφντομθ περιγραφι τθσ ιςτοςελίδασ που κζλετε να προςκζςετε ωσ υπερςφνδεςμο. Στο τμιμα Link to a file or web site, γράψτε το URL τθσ ιςτοςελίδασ (Σχ. 26). ρήκα 26. Βήμα 4. Στο τμιμα Window, από το μενοφ, επιλζξτε New window. Πατιςτε Save and return to course (Σχ. 25). Πώσ να προςθϋςω τη δικό μου ιςτοςελύδα ςτο μϊθημα; Βήμα 1. Πατιςτε το Turn editing on ςτθν πάνω δεξιά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ (Σχ. 19). Βήμα 2. Από το μενοφ Add a resource, επιλζξτε Compose a web page (Σχ. 27).

68 ρήκα 27. Βήμα 3. Γράψτε το όνομα και μια ςφντομθ περιγραφι τθσ ιςτοςελίδασ που κζλετε να προςκζςετε (ρ. 28). ρήκα 28.

69 Βήμα 4. Δθμιουργιςτε τθ δικι ςασ ιςτοςελίδα. Όπωσ βλζπετε υπάρχουν πολλζσ επιλογζσ με τισ οποίεσ μπορείτε να πειραματιςτείτε, για παράδειγμα να αλλάξετε το χρϊμα ι τθ γραμματοςειρά του κειμζνου, να προςκζςετε εικόνα, να προςκζςετε ςφνδεςμο, να ειςάγετε πίνακα κτλ. (Σχ. 29). ρήκα 29. Βήμα 5. Στο τμιμα Window, από το μενοφ, επιλζξτε New window. Πατιςτε Save and return to course (Σχ. 25). Πώσ επεξεργϊζομαι αρχεύα και φακϋλουσ; Βήμα 1. Πατιςτε ςτο Files ςτο τμιμα Administration ςτθν κάτω αριςτερά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ (Σχ. 30).

70 Βήμα 2. Παηήζηε ην Make a folder (ρ. 31). ρήκα 30.

71 ρήκα 31. Βήμα 3.Γξάςηε έλα φλνκα γηα ηνλ θάθειν θαη παηήζηε Create (ρ. 32). ρήκα 32. Βήμα 4. Ο φάκελοσ δθμιουργικθκε με επιτυχία. Επιλζξτε τα αρχεία που κζλετε να μετακινθκοφν ςτον φάκελο, από το μενοφ, επιλζξτε Move to another folder (Σχ. 33). ρήκα 33. Βήμα 5. Ζνα μινυμα εμφανίηεται και ςασ κακοδθγεί κατά το υπόλοιπο τθσ διαδικαςίασ. Πάτε ςτον φάκελο-προοριςμό και πατιςτε Move files to here.

72 Δπηθνηλσλία Πώσ να ςτόςω ϋνα forum ςτο Moodle; Βήμα 1. Πατιςτε το κουμπί Turn editing on ςτθν πάνω δεξιά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ. Από το μενοφ Add an activity, επιλζξτε Forum (Σχ. 34). ρήκα 34. Βήμα 2. Γράψτε ζνα όνομα και μια ςφντομθ ειςαγωγι για το forum πικανϊσ με μια ςφντομθ περιγραφι και τουσ κανόνεσ του. Επιλζξτε τον τφπο Forum που ςασ ικανοποιεί περιςςότερο (κυμθκείτε ότι μπορείτε να κάνετε κλικ ςτο κίτρινο ερωτθματικό για περεταίρω βοικεια). Πατιςτε Save and return to course (Σχ. 35).

73 ρήκα 35a. ρήκα 35b. Βήμα 3. Παηήζηε ζην E-learning forum (ρ. 36).

74 ρήκα 36. Βήμα 4. Παηήζηε ζην Add a new discussion topic (ρ. 37). ρήκα 37. Βήμα 5. Γξάςηε έλα ζέκα θαη ην κήλπκά ζαο. Press Save changes (ρ. 38). ρήκα 38a.

75 ρήκα 38b. Βήμα 6. Ζνα νζο κζμα (thread) ζχει δθμιουργθκεί. Κάντε κλικ ςε ζνα κζμα ςυηιτθςθσ και κα δείτε όλα τα μθνφματα κάτω από αυτό (Σχ. 39). Περιθγθκείτε ςε όλεσ τισ διακζςιμεσ επιλογζσ. ρήκα 39a. ρήκα 39b. Πώσ να δημιουργόςω ϋνα wiki ςτο Moodle; Βήμα 1. Πατιςτε το κουμπί Turn editing on ςτθν πάνω δεξιά γωνία τθσ αρχικισ ςελίδασ του μακιματοσ. Από το μενοφ Add an activity, επιλζξτε Wiki (Σχ. 40).

76 ρήκα 40. Βήμα 2. Γξάςηε έλα φλνκα θαη κηα ζχληνκε πεξηγξαθή. Παηήζηε Save and display (ρ. 41). ρήκα 41a.

77 ρήκα 41b. Βήμα 3. Δπεμεξγαζηείηε ην wiki γξάθνληαο κηα απάληεζε. Παηήζηε Save (ρ. 42). ρήκα 42. Βήμα 4. Σν wiki έρεη ελεκεξσζεί. Παηήζηε ODL home ζην θάησ κέξνο ηεο ζειίδαο (ρ. 43).

78 ρήκα 43. Βήμα 5. Τϊρα υποκζςτε ότι ζνασ μακθτισ ι κακθγθτισ ςυνδζεται και κζλει βρει το ςυγκεκριμζνο wiki. Επιλζγει το όνομά του και ςτο τμιμα Edit, ςυνειςφζρει τθν απάντθςθ του και ςϊηει τισ αλλαγζσ (Σχ. 44). ρήκα 44a.

79 ρήκα 44b. Βήμα 6. Το wiki ενθμερϊκθκε ξανά. Ωσ κακθγθτισ μπορείτε επίςθσ να δείτε το ιςτορικό του wiki ι να περιθγθκείτε ςτισ παλιότερεσ εκδόςεισ του (Σχ. 45). Μθ φοβθκείτε να πειραματιςτείτε μζχρι να ςασ γίνει πιο οικείο.

80 ρήκα 45.

81 Δξσηήζεηο Αμηνιόγεζεο 1. You can use Moodle A. only if you know machine language B. only if you are familiar with HTML C. without being familiar with HTML or any other programming language D. provided that you pay for it. 2. Moodly is mainly used A. in military programs B. for educational purposes C. in computer games D. for keeping record of your finances. 3. In a Moodle course A. you can upload files B. you can communicate with other teachers and/ or students C. you can evaluate your students' progress D. all of the above. 4. With Moodle A. you cannot enrol in two different courses B. anybody can have any role he/ she likes C. you can start a discussion in a forum D. you cannot create a wiki.

82 Γεκηνπξγία Αζθήζεσλ ε απηφ ην ηκήκα, ζα δνχκε πψο κπνξνχκε λα δεκηνπξγήζνπκε δηαδξαζηηθέο αζθήζεηο ρξεζηκνπνηψληαο XML θαη Flash. Μέρξη ην ηέινο απηνχ ηνπ ηκήκαηνο ζα είζηε ζε ζέζε λα δνκήζεηε πιεξνθνξίεο ρξεζηκνπνηψληαο XML γξάςηε απιφ θψδηθα ζε Flash κε Actionscript ζπλδπάζεηε XML κε ηε Flash Forms Δπίπεδν: Πξνεγκέλν Δθηηκώκελνο ρξόλνο: 2 ψξεο

83 Δηζαγσγή ζηελ XML Τι είναι η XML; Ο νξηζκφο ηεο XML είλαη extensible Markup Language. XML είλαη κηα γιψζζα ζήκαλζεο ζαλ ηελ HTML Ζ XML είρε σο ζθνπφ λα κεηαθέξεη ηα δεδνκέλα, φρη λα παξνπζηάζεη δεδνκέλα Οη εηηθέηεο ηεο XML δελ είλαη πξνθαζνξηζκέλεο. Πξέπεη λα νξίζεηε δηθέο ζαο. Ζ βαζηθή δηαθνξά κεηαμχ XML θαη HTML είλαη φηη ε HTML είλαη γηα ηελ παξνπζίαζε ησλ πιεξνθνξηψλ, ελψ ε XML είλαη γηα ηε κεηαθνξά ηνπο. Έηζη ε XML δελ αληηθαζηζηά ηελ HTML, αιιά είλαη κάιινλ έλα ζπκπιήξσκα ηεο HTML. Πώρ είναι ένα XML έγγπαθο; Δδψ είλαη έλα παξάδεηγκα ελφο εγγξάθνπ XML, πνπ δνκείηαη κε ηξφπν πνπ αληηπξνζσπεχεη έλαλ θαηάινγν CD, πνπ πεξηέρεη ηηο πεξηγξαθέο δχν κνπζηθψλ CDs. Παξαηεξείζηε φηη νη εηηθέηεο (<CATALOG>, <CD>, θιπ) έρνπλ θαζνξηζηεί απφ καο, κε ηξφπν πνπ καο βνεζά λα δεκηνπξγήζνπκε κηα πην θαηαλνεηή δνκή. <CATALOG> <CD> </CD> <CD> </CD> </CATALOG> <TITLE>Cryptic Writings</TITLE> <ARTIST>Megadeth</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Capitol</COMPANY> <PRICE>16.98</PRICE> <YEAR>1997</YEAR> <TITLE>Draconian Times</TITLE> <ARTIST>Paradise Lost</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Music for Nations</COMPANY> <PRICE>11.98</PRICE> <YEAR>1995</YEAR>

84 Πώρ μποπώ να γπάτυ ένα XML έγγπαθο; Έλα έγγξαθν XML, είλαη έλα αξρείν κε ηελ επέθηαζε.xml. Γελ ρξεηαδφκαζηε εηδηθνχο θεηκελνγξάθνπο ή πξνγξάκκαηα γηα λα δεκηνπξγήζνπκε XML έγγξαθα, παξά κφλν έλαλ ηππηθφ ζπληάθηε θεηκέλσλ. Ζ δνκή ελφο εγγξάθνπ XML, παξφηη είλαη ειεχζεξε, δηέπεηαη απφ κεξηθνχο θαλφλεο. Απηνί είλαη νη αθφινπζνη: 1. Όια ηα ζηνηρεία XML πξέπεη λα έρνπλ εηηθέηα θιεηζίκαηνο ηελ XML, δελ επηηξέπεηαη λα παξαιεηθζεί ε εηηθέηα θιεηζίκαηνο. Όια ηα ζηνηρεία πξέπεη λα έρνπλ εηηθέηα θιεηζίκαηνο: <p>this is a paragraph</p> <p>this is another paragraph</p> 2. Οη εηηθέηεο XML είλαη δηαθξίλνληαη από θεθαιαία θαη κηθξά ηελ XML, ε εηηθέηα <Message> είλαη δηαθνξεηηθή απφ ηελ εηηθέηα <message>. Αλνίγνληαο θαη θιείλνληαο νη εηηθέηεο πξέπεη λα γξαθηνχλ κε ηελ ίδηα ζεηξά θεθαιαίσλ/κηθξψλ: <message>this is incorrect</message> <message>this is correct</message> 3. Τα ζηνηρεία ηεο XML πξέπεη λα ηνπνζεηεζνύλ θαηάιιεια ηελ HTML, κπνξεί λα δείηε ηα εζθαικέλα ηνπνζεηεκέλα ζηνηρεία: <b><i>this text is bold and italic</b></i> ηελ XML, φια ηα ζηνηρεία πξέπεη λα ηνπνζεηεζνχλ θαηάιιεια ην έλα κέζα ζην άιιν: <b><i>this text is bold and italic</i></b> 4. Τα έγγξαθα XML πξέπεη λα έρνπλ έλα ζηνηρείν ξίδαο Σα έγγξαθα XML πξέπεη λα πεξηιάβνπλ έλα ζηνηρείν πνπ είλαη ν γνλέαο φισλ ησλ άιισλ ζηνηρείσλ. Απηφ ην ζηνηρείν θαιείηαη ζηνηρείν ξίδαο. <root> <child> <subchild>...</subchild>

85 </child> </root> 5. Οη ηηκέο πξέπεη λα είλαη κέζα ζε εηζαγσγηθά Σα ζηνηρεία XML κπνξνχλ λα έρνπλ ηηο ηδηφηεηεο αλά δεπγάξηα νλφκαηνο/αμίαο αθξηβψο φπσο ζηελ HTML. ε XML νη ηηκέο ηδηνηήησλ πξέπεη λα είλαη κέζα ζε εηζαγσγηθά. Μειεηήζηε ηα δχν έγγξαθα XML θαησηέξσ. Σν πξψην είλαη ιαλζαζκέλν, ην δεχηεξνο είλαη ζσζηφ: <note date=12/11/2007> <to>tove</to> <from>jani</from> </note> <note date="12/11/2007"> <to>tove</to> <from>jani</from> </note> Πώρ μποπώ να πποζθέζυ πληποθοπία εμθάνιζηρ ζε ένα XML έγγπαθο; Δίλαη δπλαηφ λα ρξεζηκνπνηεζεί CSS γηα λα κνξθνπνηήζεη έλα έγγξαθν XML. Καησηέξσ είλαη έλα παξάδεηγκα γηα ην πψο λα ρξεζηκνπνηήζεηε έλα CSS θχιιν χθνπο γηα λα κνξθνπνηήζεηε έλα έγγξαθν XML: Ρίμηε κηα καηηά ζε απηφ ην αξρείν XML (cd_catalog.xml): Δίλαη έλα έγγξαθν XML πνπ θπιάζζεη ηηο πιεξνθνξίεο γηα έλαλ θαηάινγν CD, ν νπνίνο πεξηέρεη δχν CDs.

86 Ρίμηε κηα καηηά ζε απηφ ην αξρείν XML (cd_catalog.css): CATALOG { background-color: #ffffff; width: 100%; } CD { display: block; margin-bottom: 30pt; margin-left: 0; } TITLE { color: #FF0000; font-size: 20pt; } ARTIST { color: #0000FF; font-size: 20pt; } COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; } Δίλαη ην css αξρείν πνπ ζα κνξθνπνηήζεη ην έγγξαθν XML. εκεηψζηε φηη πξέπεη απιά λα θαζνξίζνπκε ηηο ηηκέο ηδηνηήησλ γηα ηηο εηηθέηηεο XML πνπ ελδηαθεξφκαζηε. Σειηθά, έρνπκε:

87 Απηφ ην αξρείν είλαη ην ίδην κε ην αξρείν catalog.xml, κε ηε κφλε δηαθνξά φηη πεξηέρεη ηε γξακκή <?xml-stylesheet type="text/css" href="cd_catalog.css"?> πνπ ζπλδέεη ην αξρείν XML κε ην CSS αξρείν, κνξθνπνηψληαο θαηά ζπλέπεηα ην αξρείν XML.

88 Δηζαγσγή ζην Flash Τι είναι ηο Flash; Σν Flash είλαη έλα πξφγξακκα γξαθηθήο αλαπαξάζηαζεο πνιπκέζσλ εηδηθά γηα ρξήζε ζηνλ Παγθφζκην Ηζηφ Σν Flash δίλεη ηε δπλαηφηεηα λα δεκηνπξγήζεηε δηαδξαζηηθέο "ηαηλίεο" ζηνλ Παγθφζκην Ηζηφ Σν Flash ρξεζηκνπνηεί δηαλπζκαηηθή γξαθηθή αλαπαξάζηαζε, ην νπνίν ζεκαίλεη φηη ηα γξαθηθά κπνξνχλ λα θιηκαθσζνχλ ζε νπνηνδήπνηε κέγεζνο ρσξίο απψιεηα ηεο ζαθήλεηαο/πνηφηεηαο Σν Flash δελ απαηηεί πξνγξακκαηηζηηθέο δεμηφηεηεο θαη είλαη εχθνιν λα γίλεη θαηαλνεηή Σα αξρεία ηαηληψλ Flash έρνπλ ηελ επέθηαζε.swf. Πώρ μποπώ να ενζυμαηώζυ μια ηαινία Flash ζηην Ιζηοζελίδα μος; Στο τμιμα HTML, Integrating Multimedia, κα δείτε πϊσ μπορείτε να ενςωματϊςετε ζνα αρχείο βίντεο ςτθν Ιςτοςελίδα ςασ. Η ίδια λογικι ιςχφει και όταν κζλετε να ενςωματϊςετε μια ταινία flash. Ωςτόςο, υπάρχει ζνασ εναλλακτικόσ τρόποσ για να ενςωματϊςετε flash ςε ιςτοςελίδα ςασ: <object width="550" height="400"> <param name="movie" value="somefilename.swf"> <embed src="somefilename.swf" width="550" height="400"> </embed> </object> Πώρ μποπώ να δυ και να δημιοςπγήζυ Flash απσεία; Για να προβάλετε ταινίεσ Flash, χρειάηεςτε το Shockwave Player. Αν δεν ζχετε το Shockwave Player εγκατεςτθμζνο μπορείτε να το κατεβάςετε δωρεάν από το site τθσ Adobe. Για να δθμιουργιςετε τθ δικι ςασ ταινίεσ Flash χρειάηεται να αγοράςετε ζνα πρόγραμμα Flash. Η τελευταία ζκδοςθ τθσ Adobe είναι το Adobe Flash Lite (ι Flash CS4). Αν δεν ζχετε το Flash πρόγραμμα, μπορείτε να κάνετε λιψθ μιασ δοκιμαςτικισ ζκδοςθσ 30 θμερϊν δωρεάν του Flash από τθν Adobe.

89 Πώρ μποπώ να δημιοςπγήζυ ένα κινούμενο ανηικείμενο; 1. Ανοίγουμε ζνα νζο αρχείο Flash (Αρχείο-> Νζα ι Ctrl + N). Επιλζγουμε Flash ζγγραφο. 2. Στο χρονοδιάγραμμα που εμφανίηεται υπάρχει ζνα ςτρϊμα (Layer 1) με ζνα κενό (blank) keyframe. Επιλζγουμε κενό αυτό το πλαίςιο και να βγάλουμε ζναν κφκλο, χρθςιμοποιϊντασ το Oval Tool και ζνα χρϊμα τθσ επιλογισ μασ. 3. We select frame 30 from timeline and with right-click we add frames. Επιλζγουμε frame 30 από χρονοδιάγραμμα και με δεξί κλικ ςε αυτό προςκζςουμε frames. 4. Ζτςι, θ κινοφμενθ εικόνα που ζχουμε δθμιουργιςει, κα ζχει διάρκεια 30 καρζ. Επιλζγουμε κάκε καρζ ςτθν timeline και πάμε ςτο Properties Panel και ςτθν Tween παράμετρο επιλζγουμε κίνθςθ. 5. Επιλζγουμε το πλαίςιο 30, κάνουμε δεξί-κλικ και το μετατρζπουμε ςε keyframe.

90 6. Ακολουκϊντασ τθν ίδια διαδικαςία προςκζτουμε ζνα keyframe ςτο καρζ 2, 15 και 29. Το χρονοδιάγραμμα τϊρα πρζπει να μοιάηει κάπωσ ζτςι: 7. Δπηιέγνπκε frame 2 θαη θηλνχκε ηε κπάια πνπ έρνπκε δεκηνπξγήζεη θαηά 2-3 pixels πάλσ απφ ηελ αξρηθή ζέζε. ηε ζπλέρεηα, επηιέμηε ην frame 15 θαη κεηαθηλείζηε ηελ κπάια αξθεηά πην ςειά. ηε ζπλέρεηα, επηιέμηε ην πιαίζην 29 θαη θάλεηε φ, ηη θάλαηε ζην πιαίζην 2. Απηφ είλαη, έρνπκε ηειεηψζεη ηελ θίλεζε ηεο κπάιαο. 8. Προκειμζνου να γίνει θ κίνθςθ του αντικειμζνου πιο πραγματικι μποροφμε να προςκζςουμε μια ςκιά που κα ακολουκεί τθν κίνθςι τθσ. Ζτςι δθμιουργοφμε ζνα νζα layer, κάτω από το layer για τθν μπάλα. 9. Προςκζτουμε 30 καρζ ακριβϊσ όπωσ κάναμε και για τθν μπάλα και με το Oval Tool δθμιουργοφμε ζνα ζλειψθ, γεμάτθ με γκρι χρϊμα. 10. Επιλζγουμε από το Properties Panel ηελ παξάκεηξν tween - shape, φπσο φηαλ επηιέμακε θίλεζε, ζην βήκα 4. Ζ Ease παξάκεηξνο ζα έρεη value Σν timeline κα πρζπει να μοιάηει κάπωσ ζτςι: 11. Προςκζτουμε ζνα keyframe ςτο frame 15 και μειϊνουμε το μζγεκοσ του παρακφρου χρθςιμοποιϊντασ το Free Transform Tool. 12. Αυτό ιταν! Τϊρα μποροφμε να κάνουμε προεπιςκόπθςθ τθσ δουλειάσ μασ πατϊντασ Ctrl+Enter και να το ςϊςουμε ωσ Flash (.swf) αρχείο.

91 Γηαδξαζηηθέο Αζθήζεηο Τι είναι μια διαδπαζηική άζκηζη; Μηα δηαδξαζηηθή άζθεζε είλαη κηα άζθεζε πνπ πξνυπνζέηεη ηε ζπκκεηνρή ηνπ ρξήζηε, έηζη ψζηε ε εθπαηδεπηηθή δηαδηθαζία λα γίλεη πην επράξηζηε, ελδηαθέξνπζα θαη απνηειεζκαηηθή. Δδψ είλαη έλα παξάδεηγκα ελφο drop-down quiz πνιιαπιήο επηινγήο: Πώρ μποπώ να δημιοςπγήζυ μια διαδπαζηική αζκηζη; Βήκα 1 Γεκηνπξγήζηε έλα λέν έγγξαθν a. Δπηιέμηε File > New. b. ην δηαινγηθφ θνπηί New Document, δηαιέμηε Flash File (ActionScript 2.0) θαη κεηά θαληε θιηθ ζην OK. Βήκα 2 - Document settings Κάληε δεμί-click ζην stage, επηιέμηε Document Properties θαη ζα εκθαληζηεί ην αληίζηνηρν δηαινγηθφ θνπηί. Γείρλεη φηη ην κέγεζνο ηνπ ηξέρνληνο Stage είλαη 550 x 400 pixels, θαη ην Background color ξπζκηζκέλν ζε white. Μπνξείηε λα αιιάμεηε ην κέγεζνο θαη ην ρξψκα θαηά βνχιεζε.

92 Βήκα 3 Δηζαγσγή εηθόλαο Δπηιέμηε File > Import > Import to Stage θαη κεηά επηιέμηε ηελ εηθφλα πνπ επηζπκείηε λα εηζάγεηε. Μπνξείηαη επίζεο λα παηήζεηε Ctrl+R γηα λα εηζάγεηε εηθφλα. Βήκα 4 Πξνζζέζηε εξώηεζε πνιιαπιήο επηινγήο a. Δπηιέμηε ην Text tool (T). b. ην παξάζπξν Property inspector (Window > Properties), επηιέμηε Static Text γηα λα πξνζδηνξίζεηε ηνλ ηχπν ηνπ text field, θαη κεηά γξαςηε ηελ εξψηεζε: " Who is the director of the film "Vertigo"? ". Μπνξείηε επίζεο λα νξίζεηε ην κέγεζνο ηεο γξακκαηνζεηξάο, ηελ νηθνγέλεηα θαη ην ρξψκα ηνπ θεηκέλνπ. Βήκα 5 Πξνζζέζηε έλα ComboBox component a. Δπηιέμηε Window > Components.

93 b. Κάληε δηπιφ-θιηθ ζην ComboBox ζην κελνχ Components. c. Δπηιέμηε ην component on the Stage, θαη νλνκάζηε ην φλνκα ηνπ ζηηγκηφηππνπ σο box κελνχ ηδηνηήησλ. Βήκα 6 Πξνζζέζηε ηηο επηινγέο/απαληήζεηο a. Δπηιέμηε Window > Component Inspector. ηνλ Component Inspector, θαληε θιηθ ζην data, θαη ζα αλνίμεη ην δηαινγηθφ θνπηί Value. b. Κάληε θιηθ ζην + γηα λα πξνζζέζεηε επηινγέο απαληήζεσλ θαη αληηθαηαζηήζηε ην defaultvalue κε ηηο επηινγέο. Δδψ γηα παξάδεηγκα νη επηινγέο είλαη: Alfred Hitchcock, Michael Curtiz, Billy Wilder, John Huston. Μεηά θάληε θιηθ ζην ΟΚ.

94 c. ην Component Inspector, θάληε θιηθ ζην labels θαη ζα αλνίμεη ην δηαινγηθφ θνπηί Value. Οκνίσο κε ηα παξαπάλσ πξνζζέζηε ηηο επηινγέο κε ην +. Βήκα 7 Πξνζζέζηε ην submit button a. Δπηιέμηε Window > Common Libraries > Buttons, θαη ζα αλνίμεη ην δηαινγηθφ θνπηί Libraries. b. Δπηιέμηε έλα θνπκπί θαη ζχξηε ην ζηε ζθελή. c. Κάληε δηπιφ-θιηθ ζην θνπκπί, κεηά κεηνλνκάζηε ην θνπκπί σο Submit. ην κελνχ Properties κπνξείηε επίζεο λα νξίζεηε ην κέγεζνο ηνπ θνπκπηνχ. Βήκα 8 Πξνζζέζηε έλα keyframe θαη δηαγξάςηε ηα ζηνηρεία ζην frame. Βήκα 9 - Σην keyframe 2, εηζάγεηε έλα dynamic text box a. Δπηιέμηε ην Text tool (T). b. ην Property inspector (Window > Properties) επηιέμηε Dynamic Text. c. Εσγξαθίζηε έλα νξζγψλην text box. Απηή είλαη ε πεξηνρή φπνπ ν ρξήζηεο επηιέγεη ηε ζσζηή ή ιάζνο απάληεζε. d. Δπηιέμηε ην text box θαη γξάςηε jg ζην θνπηί Variable ηνπ κελνχ Properties.

95 Βήκα 10 - Σην keyframe 2, πξνζζέζηε θνπκπί Back Just following the same steps at step 8 to add button rename the button as Back. Step 11 - Open the Action panel and add scripts a. Add scripts to Back button.click the Back button, input the following scripts: on (release) { gotoandstop(1); jg = ''; } b. Add scripts to Submit button.click the Submit button, input the following scripts: on (press) { if (box.getvalue() == 'Alfred Hitchcock') { jg = 'Congratulations'; } if (box.getvalue() == 'Michael Curtiz') { jg = ' Sorry, wrong answer! Please select again!'; } if (box.getvalue() == 'Billy Wilder') { jg = ' Sorry, wrong answer! Please select again!'; } if (box.getvalue() == 'John Huston') { jg = 'Sorry, wrong answer! Please select again!'; } gotoandstop(2); } c. Add scripts on frame 1. Click frame 1, input the following scritps: stop();

96 Σπλδπάδνληαο Flash κε XML Πώρ μποπώ να θοπηώζυ δεδομένα δςναμικά ζηην άζκηζή μος; Μπνξνχκε λα ηξνπνπνηήζνπκε ηελ άζθεζε πνιιαπιήο επηινγήο απηνχ ηνπ θεθαιαίνπ, έηζη ψζηε λα θνξηψλεη δπλακηθά ηηο εξσηήζεηο θαη απαληήζεηο απφ έλα XML αξρείν. ΣνXML αξρείν κπνξεί εχθνια λα δηαβαζηεί θαη λα ηξνπνπνηεζεί θαη δε ζα ρξεηάδεηαη λα ηξνπνπνηνχκε ηνλ θψδηθα actionscript ηνπ flash αξρείνπ καο θαη λα ην θάλνπκε compileθάζε θνξά πνπ ζέινπκε λα αιιάμνπκε ην quiz. Παξαθάησ είλαη ηα βήκαηα πνπ ζα ζαο νδεγήζνπλ ζηελ ηξνπνπνίεζε. Μέπορ 1 Τποποποιείζηε ηο πεπιβάλον ηος Flash Βήκα 1 Αλνίμηε ην αξρείν.fla πνπ έρεηε δεκηνπξγήζεη Βήκα 2 Δπηιέμηε ην ζηηγκηόηππν TextArea όπνπ εκθαλίδεηαη ε εξώηεζε. Γηαγξάςηε ηελ εξώηεζε θαη επεμεξγαζηείηαη ηηο ηδηόηεηέο ηεο: a. Αιιάμηε ηελ ηδηφηεηα Text Type απφ Static Text ζε Dynamic Text b. Απνεπηιέμηε ηα θνπκπηά Selectable, Render text as HTML θαη Show border around text c. Ζ ηηκή ηεο ηδηφηεηαο Behavior πξέπεη λα είλαη Multiline

97 d. Θέζηε ηελ ηηκή ηνπ Variable ζε "q" Βήκα 3 Δπηιέμηε ην ζηηγκηόηππν ComboBox όπνπ εκθαλίδεηαη ε ιίζηα ησλ απαληήζεσλ θαη αλνίμηε ηνλ Component Inspector (Shift+F7) a. Δπηιέμηε ην πξψην πεδίν, data, αλνίμηε ηνκελνχ ηνπ Value θάλνληαο θιηθ ζηνλ κεγεζπληηθφ θαθφ θαη δηαγξάςηε φιεο ηηο ηηκέο πνπ εηζάγαηε πξνεγνπκέλσο θάλνληαο θιηθ ζην ζήκα (-) b. Κάληε αθξηβψο ην ίδην θαη κε ην ηξίην πεδίν, labels θαη δηαγξάςηε ηηο ηηκέο ηνπ

98 Μέπορ 2 Δημιοςπγείζηε ηο απσείο XML Σν XML αξρείν πνπ ζα ρξεηαζηνχκε έρεη πνιχ απιή δνκή. Έρεη σο ζηνηρείν ξίδαο ην ζηνηρείν quiz, ην νπνίν έρεη πέληε ζηνηρεία-παηδηά. Ο πξψηνο θφκβνο είλαη ην ζηνηρείν question πνπ πεξηέρεη ηελ εξψηεζε, φπσο ππνδειψλεη θαη ην φλνκά ηνπ. Σα άιια ηέζζεξα ζηνηρεία, ιέγνληαη answer θαη πεξηέρνπλ ηηο πηζαλέο απαληήζεηο. εκεηψζηε φηη πξέπεη λα πξνζζέζνπκε ην attribute name="correct" ζην ζηνηρείν απάληεζεο πνπ αλαπαξηζηά ηε ζσζηή απάληεζε. Δδψ είλαη έλα παξάδεηγκα XML αξρείνπ, ζσζκέλνπ σο quiz.xml: <quiz> <question>who is the director of the movie Vertigo?</question> <answer name="correct">alfred Hitchcock</answer> <answer >Michael Curtiz</answer> <answer>billy Wilder</answer> <answer>john Huston</answer> </quiz> Part 3 Τποποποιείζηε ηο Actionscript Βήκα 1 Αλνίμηε ην αξρείν.fla πνπ έρεηε δεκηνπξγήζεη Βήκα 2 Αλνίμηε ην Actions Frame (F9) a. Αληηθαηαζηήζηε ηνλ θψδηθα ηνπ Layer1: Frame 1 κε ην παξαθάησ: var myxml:xml = new XML(); myxml.ignorewhite=true; myxml.load('quiz.xml'); myxml.onload = function(success) { if (success) { var question = myxml.firstchild.childnodes[0]; var answer = myxml.firstchild.childnodes; q=question; var i; for (i=1; i<answer.length; i++) { box.additem({data:answer[i].attributes.name, label:answer[i].firstchild.nodevalue}); } } }; stop(); b. Αληηθαηαζηήζηε ηνλ θψδηθα γηα ην πξψην θνπκπί, ην Submit button, κε ηα παξαθάησ: on (press) { var choice=box.getvalue(); if(choice=='correct') jg = 'Congratulations!'; else jg = 'Sorry, wrong answer! Please select again!';

99 gotoandstop(2); } Επγαζηείηαι πάνυ ζε ένα έηοιμο template Για τη διευκόλυνςή ςασ, μπορείτε να χρηςιμοποιήςετε ένα template που έχουμε δημιουργήςει αντί να δημιουργήςετε ένα εξ αρχήσ. Αυτή η ταινία Flash (quiz.swf) είναι ένα quiz πολλαπλήσ επιλογήσ που δείχνει και το ςκορ ςωςτών απαντήςεων ςτο τέλοσ. Οι ερωτήςεισ και απαντήςεισ βρίςκονται ςτο XML αρχείο (quiz.xml). Μπορείτε να τροποποιήςετε αυτό το αρχείο εύκολα και να προςθέςετε όςεσ ερωτήςεισ θέλετε. Μπορείτε επίςησ αν θέλετε να κοιτάξετε τον πηγαίο κώδικα τησ ταινίασ Flash (quiz.fla) Σε περίπτωςη που θέλετε να δοκιμάςετε να κάνετε αλλαγέσ. Ασ δοφμε πϊσ μπορείτε να τροποποιιςετε το XML αρχείο: Βήμα 1 Ανοίξτε το quiz.xml file με έναν text editor. Βήμα 2 Δϊςτε τον τίτλο του quiz Αυτό γίνεται γράφοντασ το όνομα του τίτλου ανάμεςα ςτα ςτοιχεία <title> και </title> Βήμα 3 Γράψτε τισ ερωτήςεισ-απαντήςεισ a. Κάκε ερϊτθςθ μπορεί να γραφτεί ανάμεςα ςτα ςτοιχεία <item> και </item> b. Ειδικότερα, κάκε ερϊτθςθ γράφεται ανάμεςα ςτα ςτοιχεία <question> και </question> c. Οι πικανζσ απαντιςεισ γράφονται ανάμεςα ςτα ςτοιχεία <answer> και </answer>. Θυμθκείτε ότι θ ςωςτι απάντθςθ πρζπει να περιζχει το attribute correct="y", ζτςι ϊςτε το Flash να μπορεί να τθν ξεχωρίςει. Εδϊ είναι ζνα παράδειγμα μιασ ςωςτισ και μιασ λανκαςμζνθσ απάντθςθσ ςτο XML αρχείο: <answer correct="y"> correct answer </answer> <answer> incorrect answer </answer> Αυτό είναι όλο! Μπορείτε να κατεβάςετε τα αρχεία (δεξί-κλικ και Save as) από εδϊ (κυμθκείτε να τα τοποκετιςετε ςτον ίδιο φάκελο): XML file Flash movie Flash source code (για παν ενδεχόμενο...)

100 Δξσηήζεηο Αμηνιόγεζεο 1. Which are the differences between HTML and XML? 2. How can we create a simple environment and modify the properties of an object? 3. How does a timeline work in Flash? 3. Why should we use XML files to load data into Flash? 4. How can we access an XML file using actionscript?

101 Forums - Wikis Blogs ε απηφ ην θεθάιαην, ζα αλαθέξνπκε ηξείο ηχπνπο εθαξκνγψλ πνπ ρξεζηκνπνηνχληαη επξέσλ ζην δηαδίθηπν Οινθιεξψλνληαο ην θεθάιαην ζα κπνξείηε λα εμεγήζεηε ηη είλαη θάζε κηα απφ ηηο εθαξκνγέο δεκηνπξγήζεηε έλα απιφ forum, wiki ή blog Δπίπεδν: Μέζν Δθηηκώκελνο Χξόλνο: 20 ιεπηά

102 Forums Τι εύναι ϋνα forum; Έλα forum, ή πίλαθαο κελπκάησλ (message board), είλαη κηα online ηζηνζειίδα ζπδεηήζεσλ. Απφ ηερλνινγηθήο άπνςεο, ηα forums είλαη web εθαξκνγέο πνπ δηαρεηξίδνληαη πεξηερφκελν παξαγφκελν απφ ρξήζηεο. Σα άηνκα πνπ ζπκκεηέρνπλ ζε έλα forum κπνξεί λα ζρεκαηίζνπλ θνηλσληθνχο δεζκνχο θαη νκάδεο θνηλψλ ελδηαθεξφλησλ κέζσ ησλ ζπδεηήζεσλ. Ένα παράδειγμα Forum με θέμα «Λογοηετνία»: Ποια εύναι η δομό ενόσ forum; Έλα forum απνηειείηαη απφ κηα ηεξαξρία κνξθήο δέληξνπ πνπ πεξηέρεη ζην ρακειφηεξν επίπεδν ζέκαηα πνπ ζπλήζσο απνθαινχληαη threads θαη κέζα ζε απηά κελχκαηα ρξεζηψλ πνπ θαινχληαη posts. Σα forums νξγαλψλνληαη ζε έλα πεπεξαζκέλν ζχλνιν απφ ζέκαηα πνπ δεκηνπξγνχληαη θαη ελεκεξψλνληαη απφ κηα νκάδα αηφκσλ, ηα κέιε (members), θαη θπβεξλνχληαη απφ κηα άιιε νκάδα αηφκσλ, ηνπο ζπληνληζηέο (moderators). Έλα post είλαη έλα κήλπκα θαηαρσξεκέλν απφ ρξήζηε θαη πεξηθιπζκέλν απφ έλα θνπηί πνπ πεξηέρεη ηα ζηνηρεία ηνπ ρξήζηε, ηελ ψξα θαη εκεξνκελία πνπ έγηλε ε θαηαρψξεζε θ.α. Σα Posts πεξηέρνληαη κέζα ζε threads, φπνπ εκθαλίδνληαη ζαλ θνπηηά ην έλα κεηά ην άιιν. Σν πξψην post μεθηλάεη ην tread (αξρηθφ post). Σα Posts πνπ αθνινπζνχλ έρνπλ ζθνπφ λα ζπλερίζνπλ ηελ ζπδήηεζε πάλσ ζην αξρηθφ post ή λα αληηδξάζνπλ ζε άιιεο απαληήζεηο. Έλα thread είλαη κηα ζπιινγή απφ posts, πνπ ζπλήζσο απεηθνλίδνληαη απφ ην παιαηφηεξν πξνο ην πην πξφζθαην. Έλα thread νξίδεηαη απφ έλαλ ηίηιν θαη κηα πεξηγξαθή πνπ ζπλνςίδεη ην ζέκα ζπδήηεζεο ζην νπνίν απνζθνπεί

103 Σα Threads πνπ ελψ είλαη πνιχ ζεκαληηθά δελ ιακβάλνπλ ζπρλά posts απνθαινχληαη stickyed ή θαη pinned. Έλα sticky thread εκθαλίδεηαη πάληα πάλσ απφ ηα ππφινηπα θαλνληθά threads, θαη ζπρλά ζε μερσξηζηφ ζεκείν απφ ηα ππφινηπα. Τι τύποι χρηςτών υπϊρχουν ςε ϋνα Forum; Δζσηεξηθά ηα forums νξγαλψλνπλ ηνπο ρξήζηεο πνπ έρνπλ εγγξαθεί ζε νκάδεο ρξεζηψλ. Πξνλφκηα θαη δηθαηψκαηα παξέρνληαη αλάινγα κε απηέο ηηο νκάδεο. Έλαο ρξήζηεο ηνπ forum κπνξεί λα πξναρζεί ή θαη λα ππνβηβαζηεί ζε άιιε νκάδα ρξεζηψλ αλάινγα κε θξηηήξηα πνπ έρνπλ νξηζηεί απφ ηνλ δηαρεηξηζηή Έλαο ρξήζηεο πνπ δελ έρεη εγγξαθεί απνθαιείηε ζπλήζσο επηζθέπηεο. ηνπο επηζθέπηεο ζπλήζσο παξέρνληαη κφλν δηθαηψκαηα πνπ δελ απαηηνχλ εγγξαθή ζηηο βάζεηο δεδνκέλσλ ή παξαβίαζε απφξξεησλ πιεξνθνξηψλ Οη moderators ("mod") είλαη ρξήζηεο ηνπ forum ζηνπο νπνίνπο παξέρεηαη πξφζβαζε ζε φια ηα posts θαη threads φισλ ησλ κειψλ κε ζθνπφ λα δηαηεξνχλ ην forum θαζαξφ. Οη Moderators ζπλήζσο απαληνχλ ζηα πξνβιήκαηα ησλ ρξεζηψλ, ζε γεληθέο εξσηήζεηο ή θαη ζε παξάπνλα. πλεζηζκέλα πξνλφκηα ησλ moderators είλαη: δηαγξαθή, ζπγρψλεπζε, κεηαθνξά, θαη δηαρσξηζκφο posts θαη threads; θιείζηκν, κεηνλνκαζία, stickying ησλ threads; απνθιεηζκφο, αθχξσζε απνθιεηζκνχ, πξνεηδνπνίεζε ησλ κειψλ; ή πξφζζεζε, επεμεξγαζία, αθαίξεζε ςεθνθνξηψλ. Οη δηαρεηξηζηέο (administrator, ή πην ζχληνκα "admin") δηαρεηξίδνληαη ηηο ηερληθέο ιεπηνκέξεηεο πνπ απαηηνχληαη γηα λα ιεηηνπξγεί ε ηζηνζειίδα. Μπνξνχλ λα πξνάγνπλ ή θαη λα ππνβαζκίδνπλ κέιε ζε moderators, λα δηαρεηξίδνληαη ηνπο θαλφλεο, λα δεκηνπξγνχλ ελφηεηεο θαη ππφ-ελφηεηεο θαη λα επηηεινχλ ζεκαληηθέο ιεηηνπξγίεο ζηελ βάζε δεδνκέλσλ φπσο ε δεκηνπξγία αληηγξάθσλ αζθαιείαο. Δπίζεο νη Administrators ζπρλά ιεηηνπξγνχλ θαη ζαλ moderators. Οη Administrators κπνξνχλ ηέινο λα θάλνπλ αλαθνηλψζεηο κε εκβέιεηα φιν ην site, ή λα αιιάμνπλ ηελ εκθάληζε ηνπ forum. Πωσ μπορώ να δημιουργόςω ϋνα Forum; Τπάξρνπλ δηάθνξα παθέηα δεκηνπξγίαο forum πνπ κπνξείηε λα θαηεβάζεηε. Οη πεξηζζφηεξεο πινπνηήζεηο είλαη δσξεάλ θαη αλνηθηνχ θψδηθα. Σα Forums ρξεηάδνληαη λα απνζεθεχνπλ θάπνπ ηα posts. Σα πεξηζζφηεξα ζπζηήκαηα ρξεζηκνπνηνχλ κηα βάζε δεδνκέλσλ γηα απηφ, ελψ άιια ρξεζηκνπνηνχλ απιά αξρεία θεηκέλνπ. Σν πνην είδνο απνζήθεπζεο ζα επηιέμεηε εμαξηάηαη απφ ην ινγηζκηθφ πνπ είλαη δηαζέζηκν ζηνλ εμππεξεηεηή ζαο. Αο δνχκε έλα παξάδεηγκα κε ην παθέην phpbb, ην πην γλσζηφ παθέην αλνηθηνχ θψδηθα γηα δεκηνπξγία forum. Έρεη έλα πνιχ εχρξεζην πάλει γηα ηνλ δηαρεηξηζηή θαη κηα θηιηθή ζηνλ ρξήζηε δηαδηθαζία εγθαηάζηαζεο, πνπ επηηξέπεη ην ζηήζηκν ελφο forum ζε ιίγα ιεπηά: Απνζπκπηέζηε ην BB3 παθέην ζε έλαλ ηνπηθφ θάθειν ζην ζχζηεκα. Αλεβάζηε φια ηα αξρεία ηνπ παθέηνπ ζε έλαλ online θάθειν ζηνλ εμππεξεηεηή ζαο Υξεζηκνπνηψληαο έλαλ θπιινκεηξεηή επηζθεθηείηε ηελ ηνπνζεζία πνπ ηνπνζεηήζαηε ην phpbb3 πξνζζέηνληαο «install/» Παηήζηε ηελ θαξηέια ΔΓΚΑΣΑΣΑΖ, αθνινπζήζηε ηα βήκαηα θαη ζπκπιεξψζηε ηηο ππφινηπεο πιεξνθνξίεο. Σν phpbb3 πξέπεη λα είλαη πιένλ δηαζέζηκν.

104 Wikis Τι εύναι ϋνα Wiki; A wiki is a website that uses wiki software, allowing the easy creation and editing of any number of interlinked Web pages, using a simplified markup language or a WYSIWYG text editor, within the browser. Wikis are often used to create collaborative websites, to power community websites, and for note taking. The collaborative encyclopedia Wikipedia is one of the best-known wikis. Wikis are used in business to provide intranet and knowledge management systems. A wiki enables documents to be written collaboratively, in a simple markup language using a web browser. A single page in a wiki website is referred to as a "wiki page", while the entire collection of pages, which are usually well interconnected by hyperlinks, is "the wiki". A wiki is essentially a database for creating, browsing, and searching through information. Ένα παράδειγμα wiki ιζηοζελίδας: