ΜΑΘΗΜΑΣΙΚΗ ΓΙΓΑΚΣΙΚΗ ΙΣΟΔΛΙΓΑ ΠΣΤΥΙΑΚΗ ΔΡΓΑΙΑ

Transcript

1 ΣΔΥΝΟΛΟΓΙΚΟ ΔΚΠΑΙΓΔΤΣΙΚΟ ΙΓΡΤΜΑ ΚΔΝΣΡΙΚΗ ΜΑΚΔΓΟΝΙΑ ΥΟΛΗ ΣΔΥΝΟΛΟΓΙΚΩΝ ΔΦΑΡΜΟΓΩΝ ΣΜΗΜΑ ΜΗΥΑΝΙΚΩΝ ΠΛΗΡΟΦΟΡΙΚΗ ΣΔ ΜΑΘΗΜΑΣΙΚΗ ΓΙΓΑΚΣΙΚΗ ΙΣΟΔΛΙΓΑ ΠΣΤΥΙΑΚΗ ΔΡΓΑΙΑ Πηπρηαθή εξγαζία ηνπ Γεκήηξε Μπαηαξιή (2434) θαη ηεο Ισάλλαο Κνπθάθε (2676) Δπηβιέπσλ θαζεγεηήο Γξ. Βαζίιεηνο άιηαο ΔΡΡΔ, ΜΑΙΟ 2015

2 Δηζαγσγή Δηζαγσγή Σν παξφλ έξγν πινπνηήζεθε σο πηπρηαθή εξγαζία ζηα πιαίζηα ηνπ Πξνγξάκκαηνο πνπδψλ ηνπ Σκήκαηνο Μεραληθψλ Πιεξνθνξηθήο Σ.Δ. ηνπ ΑΣΔΙ Κεληξηθήο Μαθεδνλίαο, θαηά ην αθαδεκατθφ έηνο Βαζηθφο ζηφρνο ηνπ έξγνπ απηνχ ήηαλ ν ζρεδηαζκφο θαη ε αλάπηπμε κηαο ζχγρξνλεο ηζηνζειίδαο, ε νπνία ζα εθνδηάδεη ηνπο ζπνπδαζηέο κε βνεζεηηθφ εθπαηδεπηηθφ πιηθφ γηα ηα βαζηθά καζήκαηα καζεκαηηθψλ (Λνγηζκφο Ι-Γξακκηθή Άιγεβξα, Λνγηζκφο ΙΙ) ηνπ Σκήκαηνο Μεραληθψλ Πιεξνθνξηθήο Σ.Δ. ηνπ ΑΣΔΙ Κεληξηθήο Μαθεδνλίαο. χκθσλα κε ηνλ Καλνληζκφ Δθπφλεζεο Πηπρηαθήο Δξγαζίαο: «Σα πλεπκαηηθά δηθαηψκαηα (copyright) πνπ πξνθχπηνπλ απφ ηελ νινθιήξσζε ηεο πηπρηαθήο εξγαζίαο αλήθνπλ ζηνπο ζπληειεζηέο πνπ ζπλέβαιαλ ζηελ εθπφλεζή ηεο, δειαδή ζηνπο ζπνπδαζηέο, Μπαηαξιή Γεκήηξε θαη Κνπθάθε Ισάλλα, ηνλ επηβιέπνληα θαζεγεηή, Γξ. Βαζίιεην άιηα θαη ην Σ.Δ.Ι. Κεληξηθήο Μαθεδνλίαο». Βεβαηψλνπκε φηη είκαζηε ζπγγξαθείο απηήο ηεο πηπρηαθήο εξγαζίαο θαη φηη θάζε βνήζεηα ηελ νπνία είρακε γηα ηελ πξνεηνηκαζία ηεο, είλαη πιήξσο αλαγλσξηζκέλε θαη αλαθέξεηαη ζηελ πηπρηαθή εξγαζία. Δπίζεο έρνπκε αλαθέξεη ηηο φπνηεο πεγέο απφ ηηο νπνίεο έγηλε ρξήζε δεδνκέλσλ, ηδεψλ ή ιέμεσλ, είηε απηέο αλαθέξνληαη αθξηβψο είηε παξαθξαζκέλεο. Δπίζεο βεβαηψλνπκε φηη απηή ε πηπρηαθή εξγαζία πξνεηνηκάζηεθε απφ εκάο πξνζσπηθά εηδηθά γηα ηηο απαηηήζεηο ηνπ πξνγξάκκαηνο ζπνπδψλ ηνπ Σκήκαηνο Μεραληθψλ Πιεξνθνξηθήο ηνπ Σ.Δ.Ι. Κεληξηθήο Μαθεδνλίαο. ει. 2 απφ 141

3 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Πεξηερόκελα Δηζαγσγή... 2 Πεξηερφκελα... 3 Πεξίιεςε... 7 Κεθάιαην 1o Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο»... 8 Διζαγυγή Απσική Home Γεληθή παξνπζίαζε ηεο ηζηνζειίδαο Οξηδφληην menu Login Form Search χλδεζκνη καζεκαηηθνχ ελδηαθέξνληνο Image slider Ρπζκηζηήο κεγέζνπο γξακκαηνζεηξάο Ρπζκηζηήο θσηεηλφηεηαο-«άλαςε-ζβήζε ηα θψηα» Άπθπα Μαζεκαηηθέο εθθξάζεηο Spoilers Γξαθηθέο παξαζηάζεηο Μαθημαηικά Δπγαλεία Πίλαθεο Γξαθηθέο παξαζηάζεηο Σεζη αξιολόγηζηρ Βαθμολογία Ιζηοπικό βαθμολογιών Δπίλογορ ει. 3 απφ 141

4 Πεξηερφκελα Κεθάιαην 2o Βνήζεκα ρξήζεο ινγηζκηθνχ Διζαγυγή Γημιοςπγία λογαπιαζμού Login Πίνακερ Γπαθικέρ παπαζηάζειρ Σεζη αξιολόγηζηρ Δπίλογορ Κεθάιαην 3o Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Διζαγυγή HTML Η γιψζζα ζήκαλζεο ππεξθεηκέλνπ, HTML HTML Versions PHP Δηζαγσγή ζηε PHP Η ρξεζηκφηεηα ηεο PHP Βαζηθά ραξαθηεξηζηηθά ηεο PHP Τπεξθαζνιηθέο κεηαβιεηέο Superglobal variables CSS Η ρξεζηκφηεηα ηεο CSS Βαζηθά ραξαθηεξηζηηθά ηεο CSS Η εμέιημε ηεο CSS MySQL SQL SQL MySQL Javascript Δηζαγσγή ζηε Javascript Ση πξνζθέξεη ε Javascript Βαζηθά ραξαθηεξηζηηθά ηεο Javascript JQuery MathJax ει. 4 απφ 141

5 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα JSXGraph Mathjs Joomla Δπίλογορ Κεθάιαην 4o Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ Διζαγυγή Crimson Editor Photoshop FileZilla Chrome TortoiseSVN Δπίλογορ Κεθάιαην 5o Σεθκεξίσζε θψδηθα Διζαγυγή Ρςθμιζηήρ μεγέθοςρ γπαμμαηοζειπάρ Ρςθμιζηήρ θυηεινόηηηαρ «Άνατε - ζβήζε ηα θώηα» osb.php- Σο php απσείο ζηο οποίο γίνεηαι η ζύνδεζη ζηη βάζη δεδομένυν examjavascript.js allmatrixfcn.js Μικποεθαπμογή «Γπαθικέρ παπαζηάζειρ» Ιζηοπικό βαθμολογιών ηαηικό test Γςναμικό test Login index.php Δπίλογορ ει. 5 απφ 141

6 Πεξίιεςε Κεθάιαην 6o Δκθάληζε ηζηνζειίδαο Κεθάιαην 7o χλνςε Γενικά ζςμπεπάζμαηα ηηρ μελέηηρ Μελλονηικέρ βεληιώζειρ και πποηάζειρ Κεθάιαην 8o Βηβιηνγξαθία Βιβλία Ιζηοζελίδερ LaTeX/MathJax HTML Javascript CSS Joomla Δκθάληζε, ρξψκαηα Λνηπέο ηζηνζειίδεο Κεθάιαην 9o Παξαξηήκαηα Οδηγόρ εγκαηάζηαζηρ ηος Joomla Google Analytics Ση είλαη ην Google Analytics Πσο κπνξνχκε λα ην εγθαηαζηήζνπκε Ση ιεηηνπξγίεο πξνζθέξεη Οπηικόρ δίζκορ CD ει. 6 απφ 141

7 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Πεξίιεςε Γηα ηε δεκηνπξγία ηεο "Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο", αμηνπνηήζεθαλ νη βαζηθέο ηερλνινγίεο αλάπηπμεο ηζηνζειίδσλ (HTML, PHP θαη CSS) πνπ δηδάρηεθαλ ζηα πιαίζηα ηνπ καζήκαηνο "Πξνγξακκαηηζηηθέο Δθαξκνγέο ζην Γηαδίθηπν" θαη ηερληθέο αλάπηπμεο θαη δηαρείξηζεο βάζεσλ δεδνκέλσλ (SQL) πνπ δηδάρηεθαλ ζηα πιαίζηα ησλ καζεκάησλ "Βάζεηο Γεδνκέλσλ Ι" θαη "Βάζεηο Γεδνκέλσλ ΙΙ". Υξεζηκνπνηήζεθαλ θπξίσο εξγαιεία ειεχζεξνπ ινγηζκηθνχ αλνηρηνχ θψδηθα (ΔΛ/ΛΑΚ). Σα απνηειέζκαηα ηεο εξγαζίαο είλαη δηαζέζηκα κέζσ δηαδηθηχνπ, ζηε δηεχζπλζε ηελ παξνχζα γξαπηή αλαθνξά, παξνπζηάδνληαη θαη αλαιχνληαη ηα βαζηθά θνκκάηηα ηεο πηπρηαθήο εξγαζίαο, ε ηζηνζειίδα, νη ιεηηνπξγίεο, νη ηερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ (HTML, PHP, CSS, Javascript, SQL, Joomla), ηα ινγηζκηθά πνπ ρξεζηκνπνηήζεθαλ (Crimson editor, Photoshop, Chrome, FileZilla, TortoiseSVN), ηα βαζηθά ζεκεία ηνπ πεγαίνπ θψδηθα θαη ηα ζπκπεξάζκαηα πνπ πξνέθπςαλ θαηά ηε δηάξθεηα ηεο αλάπηπμεο ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». ην ηειεπηαίν θεθάιαην ππάξρεη έλαο νδεγφο εγθαηάζηαζεο ηνπ ζπζηήκαηνο αλάπηπμεο ηζηνζειίδσλ Joomla θαη κηα αλαθνξά γηα ην πνιχ ελδηαθέξνλ εξγαιείν αλάιπζεο δηθηπαθψλ ηφπσλ, Google Analytics. Πέξα απφ ηελ παξνπζίαζε θαη ηελ αλάιπζε ησλ πηπρψλ ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» θαη ηεο δηαδηθαζίαο αλάπηπμεο ηεο, ε παξνχζα γξαπηή αλαθνξά ζηνρεχεη λα απνηειέζεη έλα ρξήζηκν θαη ελδηαθέξνλ αλάγλσζκα γηα ηνπο θνηηεηέο ηνπ ηκήκαηνο Μεραληθψλ Πιεξνθνξηθήο Κεληξηθήο Μαθεδνλίαο θαη άιισλ ζπλαθψλ ηδξπκάησλ. ει. 7 απφ 141

8 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Κεθάιαην 1o Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Δηζαγσγή ην θεθάιαην πνπ αθνινπζεί, ζα γίλεη κηα αλαιπηηθή παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο», ε νπνία είλαη δηαζέζηκε ζην δηαδίθηπν, ζηελ ειεθηξνληθή δηεχζπλζε Αξρηθή Home Γεληθή παξνπζίαζε ηεο ηζηνζειίδαο Ο επηζθέπηεο ηεο «Μαζεκαηηθήο Γηδαθηηθήο ηζηνζειίδαο», κφιηο εηζέξρεηαη ζε απηή βιέπεη ηελ Αξρηθή ζειίδα (εηθφλα 1-1). ηελ Αξρηθή ζειίδα πεξηγξάθεηαη ζπλνπηηθά ν ξφινο θαη ην πεξηερφκελν ηεο ηζηνζειίδαο κε έλα ζχληνκν θείκελν θαισζνξίζκαηνο. Δηθόλα 1-1 ει. 8 απφ 141

9 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα ηελ θνξπθή ηεο ζειίδαο βξίζθνληαη ν ηίηινο θαη ην ινγφηππν ηεο ζειίδαο (εηθφλα 1-2) Οξηδόληην menu Δηθόλα 1-2 Κάησ απφ ην ινγφηππν θαη ηνλ ηίηιν βξίζθεηαη ην βαζηθφ νξηδφληην menu, κέζσ ηνπ νπνίνπ έρεη πξφζβαζε ν ρξήζηεο ζηα πεξηερφκελα ηεο ηζηνζειίδαο (εηθφλα 1-2). Κάζε θνπκπί, αλνίγεη απηφκαηα κηα θάζεηε ιίζηα κε θνπκπηά φηαλ βξεζεί απφ πάλσ ηνπ ην πνληίθη (εηθφλα 1-3). Δηθόλα 1-3 ει. 9 απφ 141

10 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Σν menu απηφ πεξηέρεη ηηο επηινγέο : Home: κε ην θνπκπί «Home» ν ρξήζηεο πεγαίλεη ζηελ αξρηθή ζειίδα. Λνγηζκφο Ι: νξηζκνί, έλλνηεο, παξαδείγκαηα ζρεηηθά κε ηελ χιε ηνπ καζήκαηνο «Λνγηζκφο Ι», ρσξηζκέλα ζε ελφηεηεο. Λνγηζκφο ΙΙ: νξηζκνί, έλλνηεο, παξαδείγκαηα ζρεηηθά κε ηελ χιε ηνπ καζήκαηνο «Λνγηζκφο ΙΙ», ρσξηζκέλα ζε ελφηεηεο. Γξακκηθή Άιγεβξα: νξηζκνί, έλλνηεο, παξαδείγκαηα ζρεηηθά κε ηελ χιε ηνπ καζήκαηνο «Γξακκηθή Άιγεβξα», ρσξηζκέλα ζε ελφηεηεο. Mathematica: Παξνπζίαζε ηνπ ινγηζκηθνχ «Mathematica». Geogebra: Παξνπζίαζε ηνπ ινγηζκηθνχ «Geogebra». Γηδαθηηθή: βαζηθέο έλλνηεο ηεο επηζηήκεο ηεο Γηδαθηηθήο. Μαζεκαηηθά Δξγαιεία: «Γξαθηθέο παξαζηάζεηο» θαη «Πίλαθεο». Σν νξηδφληην menu είλαη δηαθνξεηηθφ γηα ηνλ επηζθέπηε ηεο ζειίδαο θαη δηαθνξεηηθφ γηα ηνλ εγγεγξακκέλν ρξήζηε. Σν menu ζην νπνίν έρεη πξφζβαζε ν εγγεγξακκέλνο ρξήζηεο δηαζέηεη πεξηζζφηεξεο επηινγέο θαη ζα αλαιπζεί πεξαηηέξσ ζε επφκελε παξάγξαθν απηνχ ηνπ θεθαιαίνπ. ει. 10 απφ 141

11 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Login Form Γεμηά ζηε ζειίδα ππάξρεη ε θφξκα Login (εηθφλα 1-4), ζηελ νπνία κπνξεί ν επηζθέπηεο λα θάλεη login κε ηα θαηάιιεια ζηνηρεία εηζφδνπ εάλ δηαζέηεη ινγαξηαζκφ ζηελ ηζηνζειίδα. Δάλ ν επηζθέπηεο δελ δηαζέηεη ινγαξηαζκφ κπνξεί λα δεκηνπξγήζεη έλαλ κε ηελ επηινγή «Γεκηνπξγία ινγαξηαζκνχ». Δάλ πάιη, ν ρξήζηεο έρεη μεράζεη username ή θαη password, ππάξρνπλ νη επηινγέο «Ξεράζαηε ηνλ θσδηθφ ζαο;» θαη «Ξεράζαηε ην φλνκα ρξήζηε;», ψζηε λα ζηαιεί ππελζχκηζε ζην ηνπ ρξήζηε. Δηθόλα Search Κάησ απφ ηε θφξκα «Login» ππάξρεη έλα απιφ πιαίζην αλαδήηεζεο (εηθφλα 1-5) φπνπ ν ρξήζηεο ή ν επηζθέπηεο ηεο ζειίδαο κπνξεί λα εηζάγεη ηνλ φξν ή ηελ πξφηαζε πνπ ηνλ ελδηαθέξεη. Με θιηθ ζην εηθνλίδην κε ην κεγεζπληηθφ θαθφ ή παηψληαο «Enter» Δηθόλα 1-5 πξαγκαηνπνηείηαη ε αλαδήηεζε θαη αλνίγεη κηα λέα ζειίδα, φπνπ πξνβάιινληαη ηα απνηειέζκαηα ζε κνξθή ζπλδέζκσλ πνπ νδεγνχλ ζηα άξζξα, φπνπ εκθαλίδεηαη ν φξνο αλαδήηεζεο. ει. 11 απφ 141

12 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» ύλδεζκνη καζεκαηηθνύ ελδηαθέξνληνο Η «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα» είλαη κηα ζειίδα αθηεξσκέλε ζηα καζεκαηηθά. ηελ αξρηθή ζειίδα ππάξρνπλ δηαζέζηκνη κεξηθνί ζχλδεζκνη απφ ηηο επίζεκεο ηζηνζειίδεο ηκεκάησλ καζεκαηηθψλ απφ Αλψηαηα Δθπαηδεπηηθά Ιδξχκαηα, αιιά θαη απφ καζεκαηηθέο εηαηξίεο ηεο Διιάδαο θαη ηνπ εμσηεξηθνχ (εηθφλα 1-6). Οη ζχλδεζκνη είλαη ζε κνξθή κηθξψλ banner, ηα νπνία ζρεδηάζηεθαλ ζην ινγηζκηθφ επεμεξγαζίαο εηθφλσλ «Photoshop» κε βάζε ηα επίζεκα ινγφηππα ησλ ηδξπκάησλ Image slider Δηθόλα 1-6 ην θεληξηθφ κέξνο ηεο ζειίδαο ππάξρεη ν Image Slider (εηθφλα 1-7). Δηθόλα 1-7 ει. 12 απφ 141

13 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Ο Image Slider είλαη έλα πιαίζην ζην νπνίν εκθαλίδνληαη πεξηνδηθά εηθφλεο. Γηαζέηεη menu πινήγεζεο πάλσ δεμηά θαη θάζε εηθφλα κπνξεί λα ιεηηνπξγεί ζαλ ζχλδεζκνο. Μπνξεί λα ρξεζηκνπνηεζεί γηα λα δηαθεκίζεη κε άκεζν ηξφπν ζηνπο επηζθέπηεο ηεο ηζηνζειίδαο, ην ηη πξαγκαηεχεηαη ε ηζηνζειίδα, λα ελεκεξψζεη ηνπο αλαγλψζηεο γηα ηηο πην πξφζθαηεο πξνζζήθεο, λα θάλεη εχθνια θαη άκεζα πξνζβάζηκα ηα πην δεκνθηιή άξζξα ή απιά λα δηαθεκίζεη άιια πξντφληα θαη ππεξεζίεο. Μηα ηζηνζειίδα δίρσο εηθφλεο πηζαλφλ θαίλεηαη απιή, κνλφηνλε θαη δελ θηλεί ην ελδηαθέξνλ ηνπ επηζθέπηε. Οη εηθφλεο δίλνπλ ρξψκα ζε κηα ηζηνζειίδα θαη θάλνπλ ην πεξηβάιινλ ηεο ηζηνζειίδαο πην επράξηζην ζηνπο επηζθέπηεο. Ο Image Slider είλαη έλα βήκα παξαπάλσ απφ ηελ απιή πξνζζήθε εηθφλσλ, θαζψο απνηειεί κηα ζπιινγή εηθφλσλ πνπ ελαιιάζζνληαη πεξηνδηθά Ρπζκηζηήο κεγέζνπο γξακκαηνζεηξάο Ο θάζε ρξήζηεο είλαη δηαθνξεηηθφο θαη έρεη δηαθνξεηηθέο αλάγθεο. Γηα απηφ ην ιφγν ππάξρεη ζηελ θνξπθή ηεο ηζηνζειίδαο ν ξπζκηζηήο κεγέζνπο γξακκαηνζεηξάο (εηθφλα 1-8). Δηθόλα 1-8 Ο ρξήζηεο κπνξεί λα «πηάζεη» ηνλ επηινγέα κεγέζνπο θαη λα απμνκεηψζεη ην κέγεζνο ηεο γξακκαηνζεηξάο. Όζν πην αξηζηεξά ν επηινγέαο, ηφζν κηθξφηεξα ηα γξάκκαηα θαη αληίζηνηρα, φζν πην δεμηά ν επηινγέαο, ηφζν κεγαιχηεξα. Ο ξπζκηζηήο γξακκαηνζεηξάο επεξεάδεη κφλν ηα γξάκκαηα ησλ άξζξσλ, δειαδή νηηδήπνηε εκθαλίδεηαη θάησ απφ ην Image Slider. ει. 13 απφ 141

14 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Ρπζκηζηήο θσηεηλόηεηαο-«άλαςε-ζβήζε ηα θώηα» Η κειέηε θαη ε θαηαλφεζε ελλνηψλ ησλ καζεκαηηθψλ είλαη ζπλήζσο κηα δηαδηθαζία πνπ απαηηεί πνιιέο ψξεο ζπλερφκελεο ελαζρφιεζεο θαη πςειά επίπεδα ζπγθέληξσζεο. Μεηά απφ πνιιέο ψξεο κειέηεο ην ζψκα θαη ην κπαιφ θνπξάδνληαη θαη ε απφδνζε πέθηεη. Δηδηθά ηα ηειεπηαία ρξφληα πνπ ην εθπαηδεπηηθφ πιηθφ βξίζθεηαη φιν θαη πην ζπρλά ζε ειεθηξνληθή κνξθή, ν καζεηήο πεξλάεη φιν θαη πεξηζζφηεξεο ψξεο κπξνζηά ζε κηα νζφλε, κε απνηέιεζκα ηα κάηηα λα θνπξάδνληαη. Γηα λα βειηησζεί ε εκπεηξία ησλ ρξεζηψλ ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο», πξνζηέζεθε ε ιεηηνπξγία «Άλαςε/ζβήζε ηα θψηα». Πξφθεηηαη γηα έλα εηθνλίδην-δηαθφπηεο κε ην νπνίν, αιιάδνπλ ηα ρξψκαηα ηεο ζειίδαο απφ θσηεηλά ζε ζθνηεηλά θαη αληηζηξφθσο (εηθφλα 1-9). Δηθόλα 1-9 Γφζεθε ηδηαίηεξε πξνζνρή ζηελ επηινγή ησλ ρξσκάησλ, θαζψο γηα λα κπνξεί λα δηαβαζηεί έλα θείκελν κε άλεζε (readability), πξέπεη λα ππάξρεη ηθαλνπνηεηηθή αληίζεζε κεηαμχ ρξψκαηνο θφληνπ θαη ρξψκαηνο θεηκέλνπ. Όηαλ «ηα θψηα είλαη αλακκέλα» (ην εηθνλίδην-δηαθφπηεο θαίλεηαη αλακκέλν), ηα ρξψκαηα ηεο ηζηνζειίδαο είλαη θσηεηλά. Σν θφλην ζηα ζεκεία φπνπ ππάξρεη θείκελν, είλαη θσηεηλφ θαη ε γξακκαηνζεηξά έρεη καχξν ρξψκα (εηθφλα 1-10). Όηαλ «ηα θψηα είλαη ζβεζκέλα» (ην εηθνλίδην-δηαθφπηεο θαίλεηαη ζβεζκέλν), ηα ρξψκαηα ηεο ηζηνζειίδαο είλαη ζθνχξα. Σν θφλην ζηα ζεκεία φπνπ ππάξρεη θείκελν, είλαη ζθνχξν θαη ηα γξάκκαηα αλνηρηφρξσκα (εηθφλα 1-11). ει. 14 απφ 141

15 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 1-10 Δηθόλα 1-11 ει. 15 απφ 141

16 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» 1.2 Άξζξα Όιν ην πεξηερφκελν ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» έρεη ηε κνξθή άξζξσλ θαη είλαη πξνζβάζηκα απφ ην θεληξηθφ νξηδφληην menu. Κάησ απφ θάζε θνπκπί μεδηπιψλεηαη κηα ιίζηα κε θνπκπηά, φπνπ θάζε θνπκπί είλαη ζχλδεζκνο γηα έλα άξζξν. ηα άξζξα ππάξρνπλ νξηζκνί, γξαθηθέο παξαζηάζεηο, παξαδείγκαηα, ιπκέλεο αζθήζεηο, εθθσλήζεηο αζθήζεσλ, θαζψο θαη ζχλδεζκνη απφ ηνπο νπνίνπο κπνξεί ν ρξήζηεο λα θαηεβάζεη ρξήζηκα pdf θαη δηαθάλεηεο power point Μαζεκαηηθέο εθθξάζεηο Όιεο νη καζεκαηηθέο εθθξάζεηο έρνπλ γξαθηεί κε ηε βνήζεηα ηεο Javascript βηβιηνζήθεο, MathJax. Η βηβιηνζήθε MathJax βαζίδεηαη ζην ζχζηεκα ζηνηρεηνζεζίαο θεηκέλνπ «LaTeX» θαη εηδηθεχεηαη ζηελ ζσζηή θαη θαιαίζζεηε παξνπζίαζε καζεκαηηθψλ ζπκβφισλ ζην δηαδίθηπν. Πέξα απφ ηελ απιή πξνβνιή καζεκαηηθψλ ζπκβφισλ, ε βηβιηνζήθε MathJax πξνζθέξεη θαη ηε δπλαηφηεηα κεγέζπλζεο ησλ καζεκαηηθψλ παξαζηάζεσλ (εηθφλα 1-12) κε κνλφ ή δηπιφ θιηθ ή απιφ πέξαζκα ηνπ πνληηθηνχ (hover), αιιά θαη ηελ πξνβνιή ηνπ LaTeX θψδηθα πνπ πινπνηεί κηα ζπγθεθξηκέλε καζεκαηηθή έθθξαζε. Δηθόλα 1-12 ει. 16 απφ 141

17 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Με δεμί θιηθ ζε κηα καζεκαηηθή παξάζηαζε εκθαλίδεηαη ζην ρξήζηε έλα menu (εηθφλα 1-13), ζην νπνίν κπνξεί ν ίδηνο λα θάλεη ηηο ξπζκίζεηο πνπ επηζπκεί (πνζνζηφ zoom, πνηα ελέξγεηα ζα ελεξγνπνηεί ηε κεγέζπλζε θ.α.) Spoilers Δηθόλα 1-13 ην ηέινο θάζε ελφηεηαο ππάξρνπλ ζπλήζσο κεξηθέο αζθήζεηο. Οη εθθσλήζεηο ησλ αζθήζεσλ είλαη εκθαλείο ελψ νη ιχζεηο είλαη θξπκκέλεο θαη εκθαλίδνληαη κε έλα θνπκπί «Λχζε» (εηθφλα 1-14). Δηθόλα 1-14 ει. 17 απφ 141

18 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Σν ίδην θνπκπί θξχβεη μαλά ηε ιχζε ηεο άζθεζεο, εάλ είλαη επηζπκεηφ Γξαθηθέο παξαζηάζεηο Οη γξαθηθέο παξαζηάζεηο πνπ εκθαλίδνληαη ζηελ «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα» δεκηνπξγνχληαη κε ηε ρξήζε ηεο Javascript βηβιηνζήθεο «JSXGraph» (εηθφλα 1-15). Όιεο νη γξαθηθέο παξαζηάζεηο δηαζέηνπλ ζην θάησ δεμηά κέξνο ηνπο έλα κηθξφ panel ειέγρνπ. Ο ρξήζηεο ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» έρεη ηε δπλαηφηεηα κέζσ ηνπ panel λα κεηαβάιιεη ην zoom κηαο γξαθηθήο παξάζηαζεο, αιιά θαη λα θηλεζεί θαηά κήθνο ησλ αμφλσλ. Δηθόλα Μαζεκαηηθά Δξγαιεία ηελ ελφηεηα «Μαζεκαηηθά εξγαιεία», ε νπνία είλαη πξνζβάζηκε απφ εγγεγξακκέλνπο ρξήζηεο αιιά θαη απινχο επηζθέπηεο, ππάξρνπλ δχν κηθξνεθαξκνγέο : «Πίλαθεο» θαη «Γξαθηθέο παξαζηάζεηο» Πίλαθεο Πξφθεηηαη γηα έλα εξγαιείν ν ρξήζηεο ηνπ νπνίνπ έρεη ηε δπλαηφηεηα λα δεκηνπξγήζεη πίλαθεο κε ηηο δηαζηάζεηο θαη ηα πεξηερφκελα πνπ επηζπκεί θαη ζηε ζπλέρεηα λα πξαγκαηνπνηήζεη θάπνηνπο ππνινγηζκνχο. ει. 18 απφ 141

19 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Αξρηθά, ν ρξήζηεο δειψλεη φλνκα θαη δηαζηάζεηο γηα ηνλ πίλαθα πνπ ζα δεκηνπξγεζεί (εηθφλα 1-16). Δηθόλα 1-16 Με ην θνπκπί «Φηηάμε πίλαθα» δεκηνπξγείηαη ν πίλαθαο (εηθφλα 1-17). Δηθόλα 1-17 Απφ πξνεπηινγή, ηα ζηνηρεία ηνπ πίλαθα παίξλνπλ ηπραίεο ηηκέο. Με θιηθ πάλσ ζε έλα ζηνηρείν, κπνξεί λα θαηαρσξεζεί ε επηζπκεηή ηηκή (ε ιεηηνπξγία απηή είλαη δηαζέζηκε ζην Google Chrome). Κάησ απφ ηνλ πίλαθα ππάξρεη ην θνπκπί «Δπεμεξγαζία πίλαθα <φλνκα πίλαθα>». Όηαλ παηεζεί ην θνπκπί απηφ, εκθαλίδνληαη νη εληνιέο : «Μεδέληζε», ην νπνίν αληηθαζηζηά φια ηα ζηνηρεία ηνπ πίλαθα κε κεδεληθά «Μνλαδηαίν\», θάλεη ηνλ πίλαθα κνλαδηαίν, κε κνλάδεο ζηε δηαγψλην απφ α 11 σο α mn. «Μνλαδηαίν/», θάλεη ηνλ πίλαθα κνλαδηαίν, κε κνλάδεο ζηε δηαγψλην απφ α 1n σο α m1. ει. 19 απφ 141

20 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» «Απνζήθεπζε ζε.txt», εκθαλίδεη παξάζπξν δηαιφγνπ γηα λα επηιέμεη ν ρξήζηεο ζε πνην ζεκείν ηνπ ππνινγηζηή ηνπ ζα απνζεθεχζεη έλα αξρείν θεηκέλνπ ην νπνίν ζα πεξηέρεη ηνλ πίλαθα. «Απνζήθεπζε ζε excel», εκθαλίδεη παξάζπξν δηαιφγνπ γηα λα επηιέμεη ν ρξήζηεο ζε πνην ζεκείν ηνπ ππνινγηζηή ηνπ ζα απνζεθεχζεη έλα αξρείν excel ην νπνίν ζα πεξηέρεη ηνλ πίλαθα. «Απνζήθεπζε ζε Numbers», αθνξά ρξήζηεο mac ιεηηνπξγηθνχ, φπνπ ππάξρεη ην ινγηζκηθφ «Numbers», ην νπνίν είλαη αληίζηνηρν ηνπ γλσζηνχ excel. «Βξεο ηνλ αλάζηξνθν», ππνινγίδεη θαη εκθαλίδεη θάησ απφ ηνλ αξρηθφ πίλαθα, ηνλ αλάζηξνθν πίλαθα. «Γηέγξαςε ηνλ πίλαθα», δηαγξάθεη ηνλ αξρηθφ πίλαθα θαη νπνηνδήπνηε ππνινγηζκφ έρεη γίλεη γηα απηφλ. «Βξεο ηνλ αληίζηξνθν», ππνινγίδεη ηνλ αληίζηξνθν πίλαθα «Άλσ ηξηγσληθφο», κεηαηξέπεη ηνλ πίλαθα ζε άλσ ηξηγσληθφ «Κάησ ηξηγσληθφο», κεηαηξέπεη ηνλ πίλαθα ζε θάησ ηξηγσληθφ «Τπνιφγηζε νξίδνπζα», ππνινγίδεη θαη εκθαλίδεη ηελ νξίδνπζα ηνπ πίλαθα «Κάλε αληίζεην», αληηθαζηζηά φια ηα ζηνηρεία ηνπ πίλαθα κε ηα αληίζεηά ηνπο «Γψζε ηπραίεο ηηκέο», δίλεη ηπραία ηηκέο ζηα ζηνηρεία ηνπ πίλαθα, απφ ην δηάζηεκα -100 σο θαη 100. «Δθηχπσζε», αλνίγεη παξάζπξν δηαιφγνπ εθηχπσζεο ηνπ αξρηθνχ πίλαθα αιιά θαη ησλ ππνινγηζκψλ πνπ έρνπλ γίλεη «Σέινο επεμεξγαζίαο», απνθξχπηεη ηα θνπκπηά επεμεξγαζίαο ηνπ πίλαθα Γξαθηθέο παξαζηάζεηο Πξφθεηηαη γηα κηα κηθξνεθαξκνγή πινπνηεκέλε κε ηε ρξήζε ηεο γιψζζαο Javascript θαη πην ζπγθεθξηκέλα κε ηε ρξήζε ηεο βηβιηνζήθεο JSXGraph. Αξρηθά πεξηιακβάλεη έλα θελφ νξζνθαλνληθφ ζχζηεκα αμφλσλ ζην νπνίν κπνξεί ν ει. 20 απφ 141

21 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα ρξήζηεο λα δεκηνπξγήζεη κέρξη πέληε (5) δηθέο ηνπ γξαθηθέο παξαζηάζεηο (εηθφλα 1-18). Δηθόλα 1-18 Με ην θνπκπί «Plot», ζρεδηάδεηαη ζην ζχζηεκα αμφλσλ ε γξαθηθή παξάζηαζε ηεο ζπλάξηεζεο πνπ πιεθηξνινγήζεθε ζην πιαίζην θεηκέλνπ. Με ην θνπκπί «Delete», δηαγξάθεηαη ε γξαθηθή παξάζηαζε, ελψ κε ηνλ δηαθφπηε «on/off» θξχβεηαη ή εκθαλίδεηαη κηα γξαθηθή παξάζηαζε πνπ έρεη δεκηνπξγεζεί. Όηαλ αλνίγεη γηα πξψηε θνξά ηε κηθξνεθαξκνγή «Γξαθηθέο παξαζηάζεηο», ππάξρεη έλα κφλν πιαίζην εηζαγσγήο καζεκαηηθήο ζπλάξηεζεο καδί κε ηα αληίζηνηρα θνπκπηά. Με ην θνπκπί «Πξφζζεζε θαη άιιε γξαθηθή παξάζηαζε», πξνζηίζεηαη αθφκα έλα πιαίζην εηζαγσγήο ζπλάξηεζεο. Όηαλ νη γξαθηθέο παξαζηάζεηο θηάζνπλ ηηο πέληε ζε ζχλνιν, ην θνπκπί «Πξφζζεζε θαη άιιε γξαθηθή παξάζηαζε» απελεξγνπνηείηαη. ει. 21 απφ 141

22 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» Με ην θνπκπί «clear all», ζβήλνπλ φιεο νη γξαθηθέο παξαζηάζεηο πνπ βξίζθνληαη ζην νξζνθαλνληθφ ζχζηεκα αμφλσλ. Σέινο, ην θνπκπί «Απνζήθεπζε εηθφλαο», αλνίγεη έλα παξάζπξν δηαιφγνπ, φπνπ ν ρξήζηεο επηιέγεη ζε πνην ζεκείν ηνπ ππνινγηζηή ηνπ ζα απνζεθεπηεί ζε κνξθή.png ην νξζνθαλνληθφ ζχζηεκα αμφλσλ κε ηηο γξαθηθέο παξαζηάζεηο πνπ πεξηέρεη. 1.4 Σεζη αμηνιόγεζεο Οη εγγεγξακκέλνη ρξήζηεο ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» έρνπλ ηε δπλαηφηεηα λα δνθηκάζνπλ ηηο γλψζεηο ηνπο ζε ηεζη αμηνιφγεζεο ζρεηηθά κε ηελ χιε ησλ καζεκάησλ «Λνγηζκφο Ι» θαη «Λνγηζκφο ΙΙ». Δπίζεο, ππάξρεη δηαζέζηκν θαη έλα ηεζη αμηνιφγεζεο πνπ αθνξά ην ινγηζκηθφ «Mathematica». Σα ηεζη αμηνιφγεζεο είλαη πξνζβάζηκα απφ ην θεληξηθφ νξηδφληην menu, θάησ απφ ηελ επηινγή «Test Αμηνιφγεζεο». Η επηινγή απηή θαίλεηαη κφλν αθνχ έρεη γίλεη ζχλδεζε ηνπ ρξήζηε ζηελ ηζηνζειίδα. Σα ηεζη αμηνιφγεζεο πεξηέρνπλ εξσηήζεηο πνιιαπιψλ επηινγψλ. Τπάξρνπλ δχν ηξφπνη αμηνιφγεζεο γηα θάζε ζέκα: δπλακηθφ θαη ζηαηηθφ ηεζη. ην δπλακηθφ ηεζη αμηνιφγεζεο νη εξσηήζεηο θαη νη πηζαλέο απαληήζεηο ηνπο αληινχληαη εμνινθιήξνπ απφ ηε βάζε δεδνκέλσλ θαη είλαη δηαθνξεηηθέο θάζε θνξά. ην ζηαηηθφ ηεζη, νη εξσηήζεηο θαη νη πηζαλέο απαληήζεηο βξίζθνληαη απνζεθεπκέλεο ζην server, ζαλ νπνηνδήπνηε άιιν άξζξν θαη θάζε θνξά πνπ εθηειείηαη ην ηεζη πεξηέρεη ηηο ίδηεο εξσηήζεηο θαη απαληήζεηο. Αλ ν ρξήζηεο μεράζεη λα απαληήζεη θάπνηα απφ ηηο εξσηήζεηο ελφο ηεζη, ην ζχζηεκα ηνλ εηδνπνηεί κε έλα ζρεηηθφ κήλπκα (εηθφλα 1-19). ει. 22 απφ 141

23 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 1-19 Μφλν εάλ φιεο νη εξσηήζεηο έρνπλ απαληεζεί ππνινγίδεηαη, απνζεθεχεηαη ζηε βάζε θαη πξνβάιιεηαη ε βαζκνινγία. Η βαζκνινγία πξνβάιιεηαη ζηνλ ρξήζηε κε έλα πιαίζην ην νπνίν εκθαλίδεηαη θεληξηθά ζηε ζειίδα (εηθφλα 1-20). Δηθόλα 1-20 ην θέληξν ηνπ πιαηζίνπ εκθαλίδεηαη ε βαζκνινγία απφ 0 σο 100. Σν ρξψκα ησλ αξηζκψλ αιιάδεη αλάινγα κε ην βαζκφ: θφθθηλν γηα βαζκνινγία θάησ απφ 50. πνξηνθαιί γηα βαζκνινγίεο απφ 50 έσο θαη 70. πξάζηλν γηα βαζκνινγίεο απφ 70 έσο 100. Σν θφλην είλαη κηα εηθφλα απφ καπξνπίλαθα. ην θάησ κέξνο ηνπ πιαηζίνπ ππάξρνπλ ηα θνπκπηά «Κιείζηκν», «Γνθίκαζε μαλά» θαη «Ιζηνξηθφ βαζκνινγηψλ». ει. 23 απφ 141

24 Παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» 1.5 Βαζκνινγία Ιζηνξηθό βαζκνινγηώλ Πέξα απφ ην πιαίζην (εηθφλα 1-20) πνπ εκθαλίδεηαη ζην ρξήζηε κεηά ηελ νινθιήξσζε ελφο ηεζη αμηνιφγεζεο, νη βαζκνινγίεο είλαη δηαζέζηκεο κε άιινπο δχν ηξφπνπο. Όηαλ ζπλδέεηαη έλαο ρξήζηεο ζηελ ηζηνζειίδα θαη γηα φζε ψξα είλαη ζπλδεδεκέλνο, ππάξρνπλ νη πην πξφζθαηεο βαζκνινγίεο ηνπ γηα ηα ηεζη αμηνιφγεζεο ζε κνξθή progress bar ζην ζεκείν ηνπ «Login form» (εηθφλα 1-21). Δηθόλα 1-21 Αθφκε, γηα λα ειέγρεη ν ρξήζηεο ηελ πξφνδν ηνπ, ππάξρεη θαη ην «Ιζηνξηθφ βαζκνινγηψλ», θάησ απφ ηελ επηινγή «Test αμηνιφγεζεο» ηνπ θεληξηθνχ νξηδφληηνπ menu (εηθφλα 1-22). Δηθόλα 1-22 ει. 24 απφ 141

25 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα ηε ζειίδα «Ιζηνξηθφ Βαζκνινγηψλ» παξνπζηάδνληαη ζε κνξθή ιίζηαο ηα απνηειέζκαηα ησλ ηεζη «Λνγηζκφο Ι», «Λνγηζκφο ΙΙ» θαη «Mathematica», κε ρξνλνινγηθή ζεηξά (εηθφλα 1-23). Δηθόλα 1-23 Δπίινγνο Δδψ νινθιεξψλεηαη κηα πξψηε, «επηθαλεηαθή» παξνπζίαζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο ηζηνζειίδαο». Παξνπζηάζηεθαλ ηα εκθαληζηαθά ραξαθηεξηζηηθά, νη ιεηηνπξγίεο θαη ην πεξηερφκελν ηεο ζειίδαο. ηα επφκελα θεθάιαηα, αθνινπζεί ε παξνπζίαζε θαη ε αλάιπζε ησλ επηκέξνπο θνκκαηηψλ ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». ει. 25 απφ 141

26 Βνήζεκα ρξήζεο ινγηζκηθνχ Κεθάιαην 2o Βνήζεκα ρξήζεο ινγηζκηθνύ Δηζαγσγή ην παξφλ θεθάιαην ζα παξνπζηαζηνχλ κία-κία νη ιεηηνπξγίεο. νη νπνίεο είλαη δηαζέζηκεο ζην ρξήζηε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». 2.1 Γεκηνπξγία ινγαξηαζκνύ Σν κεγαιχηεξν κέξνο ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» είλαη δεκφζηα πξνζβάζηκν. Η δεκηνπξγία ινγαξηαζκνχ ζηελ ηζηνζειίδα είλαη πξναηξεηηθή. Γηα λα δεκηνπξγήζεη ινγαξηαζκφ έλαο επηζθέπηεο, δελ έρεη παξά λα επηιέμεη «Γεκηνπξγία ινγαξηαζκνχ» ζηε «Login Form», κηα θφξκα πνπ βξίζθεηαη ζην δεμί κέξνο ηεο ηζηνζειίδαο (εηθφλα 2-1). Δηθόλα 2-1 ει. 26 απφ 141

27 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Με ηελ επηινγή «Γεκηνπξγία ινγαξηαζκνχ», αλνίγεη ε παξαθάησ θφξκα εηζαγσγήο ζηνηρείσλ (εηθφλα 2-2). Δηθόλα 2-2 Η εγγξαθή δελ πξαγκαηνπνηείηαη εάλ δελ εηζαρζεί θσδηθφο πξφζβαζεο κε πεξηζζφηεξα απφ ηέζζεξα ςεθία θαη δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ θαηάιιειεο κνξθήο. Αθνχ ζπκπιεξσζνχλ όια ηα ζηνηρεία θαη ν ρξήζηεο παηήζεη «Δγγξαθή», ζηέιλεηαη έλα επηβεβαίσζεο, ζηελ δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ πνπ δήισζε. Ο ρξήζηεο ελεκεξψλεηαη γηα απηή ηε δηαδηθαζία κε αληίζηνηρν κήλπκα, ακέζσο κεηά ηελ δεκηνπξγία ηνπ ινγαξηαζκνχ. 2.2 Login ηελ ίδηα θφξκα (Δηθφλα 2-1) γίλεηαη ην login, αιιά ππάξρνπλ θαη νη επηινγέο «Ξεράζαηε ηνλ θσδηθφ ζαο;» θαη «Ξεράζαηε ην φλνκα ρξήζηε;». Απηέο νη επηινγέο ππάξρνπλ γηα λα βνεζήζνπλ φπνην ρξήζηε δελ ζπκάηαη θάπνην απφ ηα ζηνηρεία εηζφδνπ. Ο ρξήζηεο εηζάγεη ηε δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ ει. 27 απφ 141

28 Βνήζεκα ρξήζεο ινγηζκηθνχ ηνπ (εηθφλα 2-3) θαη ην ζχζηεκα απηφκαηα ζηέιλεη εηδνπνηεηήξην κε ηα ζηνηρεία πνπ δεηήζεθαλ. 2.3 Πίλαθεο Δηθόλα 2-3 ηελ θαξηέια «Μαζεκαηηθά εξγαιεία» ηνπ θεληξηθνχ νξηδφληηνπ menu, ππάξρεη ε κηθξνεθαξκνγή «Πίλαθεο» (εηθφλα 2-4). Δηθόλα 2-4 Αξρηθά δεηείηαη απφ ην ρξήζηε λα δψζεη κηα νλνκαζία γηα ηνλ πίλαθα, αιιά θαη ηηο δηαζηάζεηο. Σν φλνκα είλαη απαξαίηεην, θαζψο ρξεζηκεχεη ζε παξαθάησ βήκαηα. Αθνχ ν ρξήζηεο εηζάγεη ηα ζηνηρεία, παηψληαο ην θνπκπί «Φηηάμε πίλαθα», εκθαλίδεηαη έλαο πίλαθαο κε ην αληίζηνηρν φλνκα θαη δηαζηάζεηο. Οη αξρηθέο ηηκέο ησλ θειηψλ ηνπ πίλαθα είλαη ηπραίεο ηηκέο. Με θιηθ πάλσ ζε έλα ζηνηρείν, κπνξεί λα θαηαρσξεζεί λέα ηηκή (Δηθφλα 2-5). ει. 28 απφ 141

29 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 2-5 Κάησ απφ ηνλ πίλαθα, ππάξρεη ην θνπκπί «Δπεμεξγαζία», ην νπνίν εκθαλίδεη ηηο δηάθνξεο επηινγέο επεμεξγαζίαο ηνπ πίλαθα (Δηθφλα 2-6) Δηθόλα 2-6 Οη επηινγέο «Μεδέληζε», «Μνλαδηαίν\», «Μνλαδηαίν/», «Κάησ ηξηγσληθφο», «Άλσ ηξηγσληθφο», «Κάλε αληίζεην», «Γψζε ηπραίεο ηηκέο» αιιάδνπλ αλάινγα ηηο ηηκέο ησλ ζηνηρείσλ ηνπ πίλαθα. Δάλ ν πίλαθαο δελ είλαη ηεηξαγσληθφο, εκθαλίδεηαη αλάινγν κήλπκα ζε πεξίπησζε πνπ ν ρξήζηεο επηιέμεη «Άλσ ηξηγσληθφο» ή «Κάησ ηξηγσληθφο». Οη επηινγέο «Βξεο ηνλ αλάζηξνθν», «Βξεο ηνλ αληίζηξνθν» θαη «Τπνινγηζκφο νξίδνπζαο» πξαγκαηνπνηνχλ απηφκαηα ηνπο ππνινγηζκνχο θαη εκθαλίδνπλ ηα απνηειέζκαηα θάησ απφ ηνλ πίλαθα (εηθφλα 2-7). Δάλ ν πίλαθαο δελ είλαη ηεηξαγσληθφο θαη δεηεζεί λα ππνινγηζηνχλ νξίδνπζα ή αληίζηξνθνο πίλαθαο, εκθαλίδεηαη αλάινγν κήλπκα. ει. 29 απφ 141

30 Βνήζεκα ρξήζεο ινγηζκηθνχ Δηθόλα 2-7 Με ηελ επηινγή «Απνζήθεπζε ζε.txt», «Απνζήθεπζε ζε Excel», «Απνζήθεπζε ζε Numbers» ν πίλαθαο απνζεθεχεηαη ζε αξρεία κνξθήο.txt,.xls θαη.numbers αληίζηνηρα. Σν αξρείν πνπ ζα δεκηνπξγεζεί ζε θάζε πεξίπησζε, παίξλεη ην φλνκα ηνπ απφ ην φλνκα πνπ δφζεθε ζηνλ πίλαθα απφ ηνλ ρξήζηε. Με ηελ επηινγή «Δθηχπσζε», αλνίγεη ζε λέα θαξηέια ην πιαίζην δηαιφγνπ εθηχπσζεο ηνπ browser (εηθφλα 2-8). Θα εθηππσζεί ην φλνκα ηνπ πίλαθα, ν πίλαθαο, αιιά θαη φζνη ππνινγηζκνί έρνπλ γίλεη. ει. 30 απφ 141

31 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα Γξαθηθέο παξαζηάζεηο ηελ κηθξνεθαξκνγή «Γξαθηθέο παξαζηάζεηο», ν ρξήζηεο κπνξεί λα εηζάγεη ηνλ καζεκαηηθφ ηχπν κηαο ζπλάξηεζεο θαη λα δεη ζηε ζπλέρεηα ηε γξαθηθή απεηθφληζή ηεο ζην νξζνθαλνληθφ ζχζηεκα αμφλσλ (εηθφλα 2-9) ει. 31 απφ 141

32 Βνήζεκα ρξήζεο ινγηζκηθνχ Δηθόλα 2-9 Με ην θνπκπί «clear all» ζβήλεηαη απφ ην νξζνθαλνληθφ ζχζηεκα αμφλσλ φπνηα ζπλάξηεζε έρεη δεκηνπξγεζεί. ηα πιαίζηα εηζαγσγήο θεηκέλνπ, ν ρξήζηεο πιεθηξνινγεί ηνλ καζεκαηηθφ ηχπν κηαο ζπλάξηεζεο θάλνληαο ρξήζε ησλ ζπκβφισλ ^, *, +, -, /. ηνλ πίλαθα πνπ αθνινπζεί, θαίλεηαη ε κνξθή πνπ πξέπεη λα έρεη ν καζεκαηηθφο ηχπνο κηαο ζπλάξηεζεο πνπ ζα εηζάγεη ν ρξήζηεο. ει. 32 απφ 141

33 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Μορφή εισαγωγής Συναρτήσεις sin(x) sin() cos(x) cos() tan(x) tan() (x^5)+3*(x^3)-10*(x^2)+2 F(x)=x 5 +3x 3-10x 2 +2 log(3) ln(3) log2(3) log 2 (3) log10(3) log 10 (3) exp(x) e x sqrt(x) pow(x,2) x 2 log1pi(x) ln(1+x) Με ην θνπκπί «plot» δεκηνπξγείηαη ε γξαθηθή παξάζηαζε, κε ην δηαθφπηε on/off θξχβεηαη θαη εκθαλίδεηαη. Με ην θνπκπί «delete» ε γξαθηθή παξάζηαζε δηαγξάθεηαη εληειψο απφ ην νξζνθαλνληθφ ζχζηεκα αμφλσλ. Με ην θνπκπί «Απνζήθεπζε εηθφλαο», αλνίγεη παξάζπξν δηαιφγνπ ψζηε λα επηιέμεη ν ρξήζηεο ζε πνην ζεκείν ηνπ ππνινγηζηή ηνπ επηζπκεί λα απνζεθεχζεη ηελ εηθφλα ηνπ νξζνθαλνληθνχ ζπζηήκαηνο αμφλσλ κε ηηο γξαθηθέο παξαζηάζεηο πνπ έρεη δεκηνπξγήζεη. Σν αξρείν εηθφλαο ζα πάξεη απηφκαηα ην φλνκα «graph.png», ην νπνίν ν ρξήζηεο κπνξεί λα ην αιιάμεη θαηά ηελ απνζήθεπζε. Γηα ιφγνπο επθξίλεηαο, είλαη δπλαηφ λα δεκηνπξγεζνχλ κέρξη θαη 5 γξαθηθέο παξαζηάζεηο ηαπηφρξνλα ζην νξζνθαλνληθφ ζχζηεκα αμφλσλ. Κάζε γξαθηθή παξάζηαζε έρεη δηαθνξεηηθφ ρξψκα γξακκήο θαη αλαγξάθεηαη ν καζεκαηηθφο ηεο ηχπνο. 2.5 Σεζη αμηνιόγεζεο Ο ζπλδεδεκέλνο ρξήζηεο κπνξεί λα δνθηκάζεη ηηο γλψζεηο ηνπ κε tests αμηνιφγεζεο πνπ δηαζέηεη ε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Σα tests αμηνιφγεζεο είλαη ζε κνξθή πνιιαπιψλ επηινγψλ, πεξηέρνπλ πάληα 15 εξσηήζεηο θαη είλαη πξνζβάζηκα κέζσ ηνπ θεληξηθνχ menu, κε ηελ επηινγή «Σεζη Αμηνιφγεζεο» (εηθφλα 2-10). Τπάξρνπλ tests αμηνιφγεζεο γηα ηα καζήκαηα ει. 33 απφ 141

34 Βνήζεκα ρξήζεο ινγηζκηθνχ Λνγηζκφο Ι, Λνγηζκφο ΙΙ θαη γηα ην ινγηζκηθφ «Mathematica». Δηθόλα 2-10 ε θάζε εξψηεζε, κφλν κία απφ ηηο 4 δηαζέζηκεο επηινγέο είλαη ε ζσζηή. Με ην θνπκπί «OK», γίλεηαη έιεγρνο εάλ έρνπλ απαληεζεί φιεο νη εξσηήζεηο. Δάλ ππάξρνπλ αλαπάληεηεο εξσηήζεηο, εκθαλίδεηαη ζρεηηθφ κήλπκα (εηθφλα 2-11). Δηθόλα 2-11 ει. 34 απφ 141

35 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Μφλν εάλ έρνπλ απαληεζεί φιεο νη εξσηήζεηο εθηειείηαη ν θψδηθαο δηφξζσζεο. Όζν εθηειείηαη ν θψδηθαο δηφξζσζεο, εκθαλίδεηαη ζην θέληξν ηεο ζειίδαο κηα progress bar (Δηθφλα 2-12). Δηθόλα 2-12 Αθνινχζσο, εκθαλίδεηαη έλα πιαίζην ζην νπνίν αλαγξάθεηαη ε βαζκνινγία ηνπ ρξήζηε (εηθφλα 2-13). Δηθόλα 2-13 ει. 35 απφ 141

36 Βνήζεκα ρξήζεο ινγηζκηθνχ ην θέληξν ηνπ πιαηζίνπ εκθαλίδεηαη ε βαζκνινγία απφ 0 σο 100. Σν ρξψκα ησλ αξηζκψλ αιιάδεη αλάινγα κε ην βαζκφ: θφθθηλν γηα βαζκνινγίεο θάησ απφ 50. πνξηνθαιί γηα βαζκνινγίεο απφ 51 έσο θαη 70. πξάζηλν γηα βαζκνινγίεο απφ 71 έσο 100. Με ην θνπκπί «Κιείζηκν», απιά θιείλεη ην πιαίζην ηεο βαζκνινγίαο. Με ην θνπκπί «Γνθίκαζε μαλά!», ν ρξήζηεο κπνξεί λα μαλαδνθηκάζεη ηηο γλψζεηο ηνπ θαη κε ην θνπκπί «Ιζηνξηθφ βαζκνινγηψλ», πξνβάιινληαη ζπγθεληξσηηθά θαη κε ρξνλνινγηθή ζεηξά φιεο νη βαζκνινγίεο ηνπ ρξήζηε (εηθφλα 2-14). Δηθόλα 2-14 ει. 36 απφ 141

37 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δπίινγνο Δδψ νινθιεξψλεηαη ε πεξηγξαθή ησλ ιεηηνπξγηψλ θαη ν ηξφπνο ρξήζεο ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». ει. 37 απφ 141

38 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Κεθάιαην 3o Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Δηζαγσγή ην θεθάιαην απηφ παξνπζηάδνληαη ζπλνπηηθά νη βαζηθέο ηερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ γηα ηελ αλάπηπμε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». 3.1 HTML Η γιώζζα ζήκαλζεο ππεξθεηκέλνπ, HTML Δπίζεκνο ηζηφηνπνο: Η HTML (HyperText Markup Language), είλαη βαζηθή γιψζζα θαηαζθεπήο ηζηνζειίδσλ. Γεκηνπξγήζεθε ζηηο αξρέο ηεο δεθαεηίαο ηνπ 90 θαη κέρξη ζήκεξα εμειίζζεηαη ζπλερψο. Καζψο είλαη βαζηθφ θνκκάηη ηνπ παγθφζκηνπ ηζηνχ, ηα πξφηππά ηεο θαζνξίδνληαη απφ ην δηεζλή νξγαληζκφ World Wide Web Consortium (W3C). Έλα αξρείν γξακκέλν ζε γιψζζα HTML έρεη ηελ θαηάιεμε «.html» θαη πεξηέρεη έλα πιήζνο απφ ηεξαξρηθά ηνπνζεηεκέλα «tags». Σα tags (ειιεληζηί, «εηηθέηεο») είλαη βαζηθφ δνκηθφ ζηνηρείν ηεο HTML θαη έρνπλ ηε κνξθή : <ονομαζία tag> περιετόμενο</ονομαζία tag>. Ο web browser, «δηαβάδεη» ηα HTML αξρεία θαη κε βάζε ηα tags δεκηνπξγεί ηε ζειίδα. Πίζσ απφ κηα εηθφλα, κηα επηθεθαιίδα, έλαλ πίλαθα θαη πνιιά άιια αθφκα elements βξίζθεηαη έλα tag. Έλα παξάδεηγκα tag είλαη ην <img>, ην νπνίν ρξεζηκνπνηείηαη γηα ηελ πξνζζήθε εηθφλσλ. Σν tag <img> αιιά θαη ηα πεξηζζφηεξα tag ιεηηνπξγνχλ αλά δεχγε, πεξηθιείνληαο θάπνην θείκελν (απιφ θείκελν, άιια δεχγε tags, script ει. 38 απφ 141

39 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα θψδηθα). Άιια tag, φπσο ην tag αιιαγήο γξακκήο <br>, ρξεζηκνπνηνχληαη απηφλνκα, ρσξίο tag ηέινπο. Σα tags, δελ θαζνδεγνχλ απιά ηνλ browser λα δεκηνπξγήζεη element, αιιά δχλαηαη λα πεξηθιείνπλ κέζα ηνπο θαη θάπνηεο ηδηφηεηεο πνπ παξακεηξνπνηνχλ ηε ιεηηνπξγία απηνχ ηνπ element. Οη ηδηφηεηεο απηέο δειψλνληαη κέζα ζηα εηζαγσγηθά ηνπ tag αξρήο θαη επεξεάδνπλ ηελ εκθάληζε ηνπ element, ηε ζπκπεξηθνξά ηνπ φηαλ ζπκβεί θάπνηα ελέξγεηα, ηνπ δίλνπλ μερσξηζηή ηαπηφηεηα (id) ή ην θαηαρσξνχλ ζε κηα θιάζε κε άιια tags, ψζηε λα κπνξεί ν ζρεδηαζηήο λα ηα δηαρεηξηζηεί πην απνδνηηθά. Δίλαη ζεκαληηθφ λα δνζεί ηδηαίηεξε πξνζνρή ζην γεγνλφο φηη ε γιψζζα HTML είλαη κηα γιψζζα κε ηελ νπνία πεξηγξάθεηαη ε δνκή θαη φρη ε εκθάληζε κηαο ηζηνζειίδαο. Θέκαηα ζρεηηθά κε ηελ εκθάληζε κηαο ζειίδαο, φπσο ηα ρξψκαηα ζην background ή ζην θείκελν, ην είδνο ηεο γξακκαηνζεηξάο, ε ζέζε θαη ε ζηνίρηζε ησλ elements, πξέπεη λα νξίδνληαη απνθιεηζηηθά κε CSS (παξάγξαθνο 1.4 : CSS). Έλα αξρείν HTML μεθηλά πάληα κε ηε δήισζε <!DOCTYPE HTML>, ε νπνία είλαη κηα νδεγία πξνο ην browser γηα ην ηη είδνπο αξρείν αθνινπζεί. ηε ζπλέρεηα μεθηλά ην tag <html>, ην νπνίν ηεξκαηίδεη (</html>) ζην ηέινο ηνπ αξρείνπ θαη πεξηθιείεη κέζα ηνπ φια ηα tags. Μέζα ζην tag <html>, βξίζθνληαη ηα tags <head> θαη <body>. Σν tag <head> πεξηέρεη ζπλήζσο πιεξνθνξίεο ζρεηηθά κε ηνλ θψδηθα HTML. Οη πιεξνθνξίεο απηέο είλαη ρξήζηκεο γηα ηελ θαιχηεξε ιεηηνπξγία θαη πξνβνιή ηεο ζειίδαο HTML ζηνλ browser. Σν tag <body> είλαη ν ππξήλαο ελφο αξρείνπ HTML. ην body δειψλνληαη φια ηα elements θαη κπαίλεη φιν ην πεξηερφκελν κηαο ζειίδαο. Μφλν ηα tags πνπ βξίζθνληαη κέζα ζην body ζα εκθαληζηνχλ φηαλ «ηξέμεη» ε ζειίδα κέζσ ηνπ browser. Γηα ιφγνπο επθνιίαο ηνπ ζρεδηαζηή αιιά θαη γηα ηελ θαιχηεξε ζπλεξγαζία κεηαμχ κηαο νκάδαο ζρεδηαζηψλ, είλαη απαξαίηεηε ε χπαξμε ζρνιίσλ ζηνλ πεγαίν θψδηθα. ει. 39 απφ 141

40 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ ηε γιψζζα HTML, ηα ζρφιηα έρνπλ ηελ εμήο κνξθή : <! ασηό είναι ένα ζτόλιο--> HTML Versions Γχν ρξφληα κεηά απφ ηελ εθεχξεζε ηνπ World Wide Web απφ ηνλ Sir Tim Berners-Lee, ν ίδηνο εθεχξε ηελ HTML. ηνλ παξαθάησ πίλαθα, θαίλνληαη νη βαζηθέο εθδφζεηο ηεο HTML απφ ηελ παιαηφηεξε έσο ηελ πην πξφζθαηε. Έθδνζε Έηνο δεκνζίεπζεο HTML HTML 2.0 Ννέκβξηνο 1995 HTML 3.20 Ιαλνπάξηνο 1997 HTML 4.01 Γεθέκβξηνο 1997 HTML Πίλαθαο 1: HTML versions Σνλ Οθηψβξην ηνπ 2014 δεκνζηεχηεθε ε ηειηθή έθδνζε ηεο HTML5 απφ ηνλ νξγαληζκφ W3C. ει. 40 απφ 141

41 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα 3.2 PHP Δηζαγσγή ζηε PHP Δπίζεκνο ηζηφηνπνο: php.net Η PHP είλαη κηα γιψζζα πξνγξακκαηηζκνχ αλνηρηνχ θψδηθα. ρεδηάζηεθε θαη ρξεζηκνπνηείηαη θπξίσο γηα ηε δεκηνπξγία ζειίδσλ web κε δπλακηθφ πεξηερφκελν. Ξεθίλεζε άηππα ην 1994 απφ ηνλ Rasmus Lerdorf, ν νπνίνο έγξαςε έλα script, ψζηε λα θξαηά θάπνηα ζηαηηζηηθά γηα ηα άηνκα πνπ επηζθέπηνληαλ ην online βηνγξαθηθφ ηνπ. Έλα ρξφλν αξγφηεξα εθδφζεθε ε πξψηε επίζεκε έθδνζε ηεο PHP, ε νπνία ηφηε νλνκάζηεθε «Personal Home Page Tools». Απφ ηφηε ε PHP εμειίζζεηαη ζπλερψο. Η πην πξφζθαηε έθδνζε είλαη ε 5.6 θαη δεκνζηεχηεθε ηνλ Αχγνπζην ηνπ 2014 θαη δηαηίζεηαη δσξεάλ. Σν αξρείν πνπ πεξηέρεη θψδηθα ζε PHP έρεη θαηάιεμε (*.php, *.php4, *.phtml θ.ά.). Ο θψδηθαο PHP δηεξκελεχεηαη θαη εθηειείηαη ζην server απφ έλαλ εηδηθφ δηεξκελεπηή (interpreter). Ο δηεξκελεπηήο απηφο ζπλήζσο είλαη ελζσκαησκέλνο ζηνπο πεξηζζφηεξνπο web server (πρ Apache). Σν απνηέιεζκα απφ ηελ εθηέιεζε ηνπ θψδηθα PHP ζπλήζσο είλαη HTML θψδηθαο, αιιά κπνξεί λα είλαη θαη εηθφλεο, pdf αξρεία ή απιφ θείκελν, ηα νπνία πξνβάιινληαη ζηνλ web browser. Όιε απηή ε εθηέιεζε ηνπ θψδηθα PHP ζηνλ server πξαγκαηνπνηείηαη ζε πξαγκαηηθφ ρξφλν, θάζε θνξά πνπ νη επηζθέπηεο επηθνηλσλνχλ κε ηνλ server. Πξφθεηηαη ινηπφλ, γηα κηα γιψζζα πξνγξακκαηηζκνχ πνπ εθηειείηαη ζηνλ δηαθνκηζηή (server-side γιψζζα πξνγξακκαηηζκνχ) Η ρξεζηκόηεηα ηεο PHP Η PHP παξέρεη πνιιέο δπλαηφηεηεο ζε έλα πξνγξακκαηηζηή δηαδηθηπαθψλ εθαξκνγψλ. Ο ρξήζηεο κηαο ηζηνζειίδαο ρσξίο PHP δελ ζα κπνξνχζε λα θάλεη ηίπνηα άιιν, εθηφο απφ ην λα δεη ζηαηηθφ πεξηερφκελν. Μέζσ PHP γίλεηαη ε ει. 41 απφ 141

42 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ επηθνηλσλία κε ην server, γίλεηαη ε επεμεξγαζία αξρείσλ πνπ βξίζθνληαη ζην server, ζπιιέγνληαη δεδνκέλα απφ ηελ ηζηνζειίδα θαη απφ ηνλ ρξήζηε. Δπίζεο, ε PHP ζπλεξγάδεηαη άςνγα κε ην πνιχ δηαδεδνκέλν, δσξεάλ θαη ειεχζεξνπ θψδηθα ζχζηεκα δηαρείξηζεο βάζεσλ δεδνκέλσλ, MySQL. Μέζσ ηεο PHP γίλεηαη ε ζχλδεζε ζηε βάζε δεδνκέλσλ, πξνζηίζεληαη λέα δεδνκέλα ζηε βάζε, επηιέγνληαη δεδνκέλα κέζσ εξσηεκάησλ SQL απφ ηε βάζε. ε ζπλδπαζκφ κε ηηο ππφινηπεο δπλαηφηεηεο πνπ παξέρεη ζηνλ πξνγξακκαηηζηή, ε PHP είλαη ζπκβαηή κε ηα πην δεκνθηιή ιεηηνπξγηθά ζπζηήκαηα θαη ηνπο πεξηζζφηεξνπο server. Τπνζηεξίδεη πνιιά ζπζηήκαηα δηαρείξηζεο βάζεσλ δεδνκέλσλ θαη ζεσξείηαη κηα ζρεηηθά εχθνιε γιψζζα πξνγξακκαηηζκνχ. Δίλαη κηα γιψζζα αλνηρηνχ θψδηθα θαη είλαη δηαζέζηκε δσξεάλ απφ ηελ επίζεκε ηζηνζειίδα ηεο νκάδαο αλάπηπμεο ηεο PHP, «php.net» Βαζηθά ραξαθηεξηζηηθά ηεο PHP Ο πην βαζηθφο θαη απιφο ηξφπνο ρξήζεο ηεο PHP, είλαη ε δεκηνπξγία ελφο αξρείνπ.php. Έλαο άιινο ηξφπνο είλαη λα ελζσκαησζεί θψδηθαο PHP κέζα ζε αξρείν ηχπνπ.html, αιιά απηφο ν ηξφπνο δελ ελδείθλπηαη θαζψο ζα πξέπεη λα έρνπλ γίλεη νη θαηάιιειεο ξπζκίζεηο απφ ηελ κεξηά ηνπ server, αιιηψο ν θψδηθαο PHP ζα αλαγλσξίδεηαη σο απιφ θείκελν ρσξίο λα εθηειείηαη. Έλα script θψδηθα PHP μεθηλά πάληα κε <?php θαη ηειεηψλεη κε?>. Κάζε γξακκή θψδηθα ηειεηψλεη κε ειιεληθφ εξσηεκαηηθφ. Οη νλνκαζίεο ησλ κεηαβιεηψλ πξέπεη πάληνηε λα μεθηλνχλ κε ην ραξαθηήξα «$», είλαη casesensitive, ελψ δελ ρξεηάδεηαη φηαλ δειψλεηαη κηα κεηαβιεηή, λα δεισζεί θαη ν ηχπνο δεδνκέλσλ, ζε αληίζεζε κε γιψζζεο, φπσο ε C θαη ε Java. ε αληίζεζε κε ηηο κεηαβιεηέο, νη ιέμεηο θιεηδηά πνπ ρξεζηκνπνηνχληαη ζηε PHP δελ είλαη casesensitive. Οη κεηαβιεηέο ζηελ PHP κπνξνχλ λα έρνπλ ηνπηθή εκβέιεηα (local) θαη κπνξνχλ λα δεισζνχλ θαη λα ρξεζηκνπνηεζνχλ κφλν κέζα ζηα φξηα κηαο ζπλάξηεζεο. Οπνηαδήπνηε κεηαβιεηή δειψλεηαη εθηφο ησλ νξίσλ κηαο ζπλάξηεζεο έρεη ει. 42 απφ 141

43 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα θαζνιηθή εκβέιεηα (global), είλαη δειαδή πξνζβάζηκε απφ νπνηνδήπνηε ζεκείν ηνπ script. Οη global κεηαβιεηέο απνζεθεχνληαη ζηε «superglobal» κεηαβιεηή «$GLOBALS» (παξάγξαθνο 2.2.4). Η πην απιή κέζνδνο εμφδνπ ζηε PHP είλαη ζπλάξηεζε «echo», κε ηελ νπνία εθηππψλνληαη αιθαξηζκεηηθνί ραξαθηήξεο θαη κεηαβιεηέο, ρσξίο λα επηζηξέθεηαη θάπνηα ηηκή. Με ηε ζπλάξηεζε «echo», κπνξνχλ λα εθηππσζνχλ θαη HTML tags ηα νπνία, σο θψδηθαο HTML, ζα κεηαθξαζηνχλ ζηνλ web browser αλάινγα. Άξα κπνξεί θαλείο λα θαηαζθεπάζεη κηα ηζηνζειίδα ρξεζηκνπνηψληαο απνθιεηζηηθά αξρεία PHP ηα νπνία ζα πεξηέρνπλ θψδηθα html. Αθνινπζεί έλα απιφ παξάδεηγκα : ηελ γξακκή 6 θαηαρσξείηαη ζε κηα κεηαβιεηή ην θιαζηθφ string «hello world». ηε ζπλέρεηα εθηππψλεηαη ζηνλ web browser κε ηε κνξθή επηθεθαιίδαο δεπηέξνπ επηπέδνπ. Αθνινπζνχλ άιια δχν string. Σν απνηέιεζκα ηνπ παξαπάλσ θψδηθα ζα είλαη ην εμήο : Η PHP ππνζηεξίδεη ηνπο ηχπνπο δεδνκέλσλ String, Integer, Float, Boolean, Array, Object, NULL θαη δηαζέηεη έηνηκεο ζπλαξηήζεηο γηα ηε δηαρείξηζε ηνπο. Οη γλσζηέο δνκέο if, switch do-while, while θαη for πινπνηνχληαη θαη ζηε PHP. Η ει. 43 απφ 141

44 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ δνκή foreach ε νπνία δελ αλήθεη ζηηο θιαζηθέο δνκέο πξνγξακκαηηζκνχ, πινπνηείηαη ζηε PHP. Έρεη ηε κνξθή: foreach (πίνακας as ζηοιτείο_πίνακα) {..ενηολές..} Υξεζηκνπνηείηαη κε κνλνδηάζηαηνπο θαη πνιπδηάζηαηνπο (κε ηε ρξήζε εκθσιηαζκέλσλ foreach) πίλαθεο ηνπο νπνίνπο ιακβάλεη σο φξηζκα. Γηαηξέρεη έλα-έλα ηα ζηνηρεία ηνπ πίλαθα πνπ έρεη σο φξηζκα θαη εθηειεί ηηο εληνιέο πνπ βξίζθνληαη κέζα ζηηο αγθχιεο Τπεξθαζνιηθέο κεηαβιεηέο Superglobal variables Η PHP δηαζέηεη κεξηθέο μερσξηζηέο κεηαβιεηέο, νη νπνίεο είλαη δηαζέζηκεο αλά πάζα ζηηγκή, ζε θάζε ζεκείν ελφο script, εληφο θαη εθηφο ζπλαξηήζεσλ ρσξίο λα ρξεηάδεηαη ν πξνγξακκαηηζηήο λα γξάςεη θάπνην επηπιένλ θψδηθα. Οη κεηαβιεηέο απηέο ιέγνληαη «ππεξθαζνιηθέο» κεηαβιεηέο θαη είλαη νη εμήο : $GLOBALS, $_SERVER, $_REQUEST, $_POST, $_GET, $_FILES, $_ENV, $_COOKIE, $_SESSION. Όπσο πξναλαθέξζεθε, ε κεηαβιεηή «$GLOBALS» πεξηέρεη φιεο ηηο global κεηαβιεηέο ελφο script. Δίλαη έλαο ζπζρεηηζηηθφο πίλαθαο, φπνπ θάζε εγγξαθή απνηειείηαη απφ έλα θιεηδί (ην φλνκα ηεο κεηαβιεηήο) θαη ην πεξηερφκελν ηεο κεηαβιεηήο. Η κεηαβιεηή $_SERVER είλαη έλαο πίλαθαο, ν νπνίνο πεξηέρεη πιεξνθνξίεο ζρεηηθά κε ην server. Σηο πιεξνθνξίεο απηέο ηηο ελεκεξψλεη ν ίδηνο ν server. Αθνινπζνχλ νη κεηαβιεηέο $_GET θαη $_POST, νη νπνίεο είλαη αλαπφζπαζην θνκκάηη ηεο επηθνηλσλίαο κεηαμχ client θαη server. Οη δχν απηέο κεηαβιεηέο απνηεινχλ ζπζρεηηζηηθνχο πίλαθεο πνπ πεξηέρνπλ ηηκέο νη νπνίεο έρνπλ ζηαιεί κε ηηο HTTP κεζφδνπο GET θαη POST αληίζηνηρα. ει. 44 απφ 141

45 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Η κεηαβιεηή $_COOKIE είλαη έλαο ζπζρεηηζηηθφο πίλαθαο ν νπνίνο πεξηέρεη ηηο πιεξνθνξίεο πνπ αθνξνχλ ην ζπγθεθξηκέλν script θαη πξνέξρνληαη απφ ηα cookies. Σα cookies είλαη κηθξά αξρεία θεηκέλνπ ηα νπνία απνζηέιινπλ νη δηθηπαθέο εθαξκνγέο ζηνλ web browser θαη απνζεθεχνληαη ηνπηθά ζηελ ζπζθεπή, φπνπ είλαη εγθαηεζηεκέλνο ν browser. Απνηεινχλ κεραληζκφ ηνπ πξσηνθφιινπ HTTP πνπ θηηάρηεθε γηα λα απνζεθεχνληαη πιεξνθνξίεο ζρεηηθά κε πξνεγνχκελε επηθνηλσλία κεηαμχ client θαη server, φπσο ζηνηρεία ζχλδεζεο, πξνηηκήζεηο, ιίζηεο αγνξψλ θηι. Η κεηαβιεηή $_REQUEST είλαη έλαο ζπζρεηηζηηθφο πίλαθαο πνπ απιά ζπγθεληξψλεη ηα δεδνκέλα ησλ κεηαβιεηψλ $_GET, $_POST θαη $_COOKIE. Σέινο, ε κεηαβιεηή $_SESSION είλαη έλαο ζπζρεηηζηηθφο πίλαθαο φπνπ απνζεθεχνληαη κεηαβιεηέο ζρεηηθέο ηηο sessions (ζπλεδξίεο). Οη ζπλεδξίεο είλαη έλαο κεραληζκφο, ψζηε λα απνζεθεχνληαη κε αζθάιεηα ζην server νη πιεξνθνξίεο ηνπ ρξήζηε γηα φζε ψξα απηφο έρεη επηθνηλσλία κε ηνλ browser θαη κηα δηθηπαθή εθαξκνγή. 3.3 CSS Η ρξεζηκόηεηα ηεο CSS Δπίζεκνο ηζηφηνπνο: Με ηελ αλάπηπμε ηνπ παγθφζκηνπ ηζηνχ, νη ηζηνζειίδεο άξρηζαλ λα γίλνληαη φιν θαη πην πεξίπινθεο, κε πνηθίιν πεξηερφκελν θαη κεγάιν φγθν πεξηερνκέλσλ. Πιένλ, κηα ζρεηηθά ζπλεζηζκέλε ηζηνζειίδα απνηειείηαη απφ κεγάιν πιήζνο αξρείσλ HTML, φπνπ ην θαζέλα πεξηέρεη κέζα ηνπ κηα πιεζψξα απφ HTML tags. Η γιψζζα HTML αλ θαη παξέρεη ηε δπλαηφηεηα παξακεηξνπνίεζεο ηεο εκθάληζεο ησλ ζηνηρείσλ κηαο ηζηνζειίδαο, παξακέλεη κηα γιψζζα πνπ θηηάρηεθε γηα λα θαζνξίδεη ηε δνκή κηαο ηζηνζειίδαο. Αο ππνζέζνπκε φηη έλαο πξνγξακκαηηζηήο δηαδηθηπαθψλ εθαξκνγψλ επηιέγεη λα κνξθνπνηήζεη εκθαληζηαθά κηα ζχγρξνλε ηζηνζειίδα ρξεζηκνπνηψληαο ει. 45 απφ 141

46 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ απνθιεηζηηθά ηε γιψζζα HTML. Θα θαινχληαλ λα επεμεξγαζηεί θάζε έλα tag απφ θάζε έλα HTML αξρείν ηεο ζειίδαο, κηα δνπιεηά ρξνλνβφξα θαη θνπξαζηηθή. ε πεξίπησζε πνπ ν πειάηεο ηνπ πξνγξακκαηηζηή άιιαδε γλψκε γηα θάηη, φπσο ην background ηεο ηζηνζειίδαο, ζα έπξεπε ν πξνγξακκαηηζηήο λα πάεη μαλά ζε θάζε έλα αξρείν θαη λα αιιάμεη ηελ ηδηφηεηα «bgcolor» ηνπ body θαη νχησ θαζεμήο θαη γηα ηα ππφινηπα ζπζηαηηθά ηεο ζειίδαο. Ο έιεγρνο ηεο εκθάληζεο ηεο ζειίδαο γίλεηαη δύζκολος θαη θάζε αιιαγή επίπονη. Παξά ηνλ θφπν ηνπ πξνγξακκαηηζηή, ην ηειηθφ απνηέιεζκα ζα ήηαλ πηζαλφλ κέηξην θαζψο νη δπλαηφηεηεο ηεο HTML ζην θνκκάηη ηεο εκθάληζεο είλαη πεξηνξηζκέλεο. Άιισζηε, ν ξφινο ηεο γιψζζαο HTML είλαη ν θαζνξηζκφο ηεο δνκήο κηαο ζειίδαο, φρη ε εκθάληζε. Όια ηα παξαπάλσ πξνβιήκαηα ηα ιχλεη ε γιψζζα CSS (Cascading Style Sheets). Με ηε ρξήζε ηεο CSS, ηα θνκκάηηα θψδηθα ζρεηηθά κε ηελ εκθάληζε κηαο ζειίδαο απνκαθξχλνληαη απφ ηνλ HTML θψδηθα θαη ζπγθεληξψλνληαη ζε έλα μερσξηζηφ αξρείν κε θαηάιεμε «.css». Ο browser «βιέπεη» ηε δνκή ηεο ζειίδαο απφ ην αξρείν ηχπνπ HTML θαη ηελ εκθάληζε απηήο ηεο ζειίδαο απφ ην αξρείνπ ηχπνπ CSS. Η ζχλδεζε κεηαμχ ησλ δχν αξρείσλ γίλεηαη ζην head θνκκάηη ηνπ HTML αξρείνπ φπνπ δειψλεηαη ην css αξρείν πνπ ζα ρξεζηκνπνηεζεί δίλνληαο ηε δηαδξνκή ηνπ ζην server φπνπ βξίζθεηαη ε ζειίδα. πλεπψο, κπνξεί θαλείο λα γξάςεη έλα θαη κνλαδηθφ αξρείν CSS, λα ην ζπλδέζεη κε φια ηα HTML αξρεία ηεο ηζηνζειίδαο ηνπ θαη έηζη απιά λα ξπζκίζεη ηε ζπλνιηθή εκθάληζε ηεο ηζηνζειίδαο. Παξάδεηγκα δήισζεο αξρείνπ CSS : <link rel="stylesheet" href="/templates/pjo_zonada_free/css/menu/hor_nav.css" type="text/css"> ει. 46 απφ 141

47 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Βαζηθά ραξαθηεξηζηηθά ηεο CSS Η ζχληαμε ηεο css είλαη αξθεηά απιή. Αθνινπζεί ηε παξαθάησ κνξθή : Με ηνλ επηινγέα θαζνξίδεηαη ην ππνζχλνιν ησλ tag ησλ νπνίσλ ε εκθάληζε ζα ηξνπνπνηεζεί απφ ηνλ θψδηθα πνπ πεξηέρεηαη ζηα άγθηζηξα. Μέζα ζηα άγθηζηξα γξάθνληαη κηα-κηα ηηο ηδηφηεηεο πνπ ζα ξπζκηζηνχλ θαη δίπια ζε θάζε ηδηφηεηα ηελ επηζπκεηή ηηκή αθνινπζνχκελε απφ ειιεληθφ εξσηεκαηηθφ. ε πεξηπηψζεηο πνπ πνιινί επηινγείο αθνξνχλ ίδηα ζηπι κνξθνπνίεζεο, ν θψδηθαο γξάθεηαη κία θνξά κφλν θαη νη επηινγείο νκαδνπνηνχληαη, κε θφκκαηα αλάκεζα ηνπο. ηηο πην απιέο πεξηπηψζεηο, γηα επηινγέαο ρξεζηκνπνηείηαη ε ιέμε-θιεηδί ηνπ tag. Αλ φκσο, γηα παξάδεηγκα, ππάξρνπλ ηξεηο παξάγξαθνη (<p>) θαη είλαη επηζπκεηφ ε θάζε παξάγξαθνο λα έρεη δηαθνξεηηθή εκθάληζε; Γηα απηέο ηηο πεξηπηψζεηο, ν ζρεδηαζηήο κπνξεί λα θαηαζθεπάζεη επηινγείο κε βάζε ηηο ηδηφηεηεο ησλ HTML εηηθεηψλ (πρ id, class, type,..), ςεπδνθιάζεηο ηεο css (πρ :hover, :checked) αιιά θαη κε βάζε ησλ ζρέζεσλ κεηαμχ ησλ δηαθφξσλ element (πρ ηα elements πνπ πεξηέρνληαη κέζα ζε έλα άιιν elementγνλέα ραξαθηεξίδνληαη σο «παηδηά»). Έλαο επηινγέαο κπνξεί λα είλαη αξθεηά απιφο, αιιά θαη αξθεηά πεξίπινθνο αλάινγα κε ηε κνξθνινγία θαη νη απαηηήζεηο γηα ηελ εκθάληζε κηαο ζειίδαο. Αθνινπζνχλ κεξηθά απιά παξαδείγκαηα πηζαλψλ επηινγέσλ θαη νη επεμεγήζεηο απηψλ: ει. 47 απφ 141

48 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Με ηνλ επηινγέα ηεο κνξθήο «.myclass» (ηειεία θαη νλνκαζία θιάζεο) επηιέγνληαη φια ηα tags πνπ έρνπλ ηελ ηδηφηεηα class= myclass. Με ηνλ επηινγέα ηεο κνξθήο «#uniqueid» επηιέγεηαη ην (κνλαδηθφ) tag πνπ έρεη ηελ ηδηφηεηα id= uniqueid. Με ηνλ επηινγέα ηεο κνξθήο «li.colored» επηιέγνληαη ηα ζηνηρεία ιίζηαο πνπ αλήθνπλ ζηελ class= colored. Με ηνλ επηινγέα «ul#listid li» επηιέγνληαη φια ηα ζηνηρεία πνπ αλήθνπλ (είλαη «παηδηά») ζηε κε-ηεξαξρεκέλε ιίζηα κε id= listid. Με ην επηινγέα «ul#listid li.colored» επηιέγνληαη φια ηα ζηνηρεία πνπ αλήθνπλ ζηε κε-ηεξαξρεκέλε ιίζηα κε id= listid ηα νπνία φκσο ηαπηφρξνλα αλήθνπλ ζηελ class= colored. Με ηνλ επηινγέα ηεο κνξθήο «a : hover» επηιέγεηαη ε εκθάληζε πνπ ζα έρνπλ φινη νη ππεξζχλδεζκνη φηαλ ν θέξζνξαο βξίζθεηαη πάλσ ηνπο (hover). Όπσο θαη ζηηο ππφινηπεο γιψζζεο πξνγξακκαηηζκνχ, ηα ζρφιηα είλαη απαξαίηεηα. Δηζάγνληαη φπσο αθνινχζσο : Μέρξη ηψξα έρεη πεξηγξαθεί ν βαζηθφο ηξφπνο ρξήζεο ηεο γιψζζαο κνξθνπνίεζεο CSS, ε ζχληαμε δειαδή μερσξηζηψλ αξρείσλ CSS (εμσηεξηθφ ζηπι κνξθνπνίεζεο). Τπάξρνπλ αθφκα δχν εζσηεξηθνί ηξφπνη δήισζεο ησλ ζηπι κνξθνπνίεζεο δηαζέζηκνη, νη νπνίνη είλαη ρξήζηκνη θαη πξνηηκφηεξνη ζε ζπγθεθξηκέλεο πεξηπηψζεηο. Υαξαθηεξίδνληαη σο εζσηεξηθνί ηξφπνη δήισζεο ζηπι, θαζψο βξίζθνληαη κέζα ζε θψδηθα HTML. ει. 48 απφ 141

49 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γηα επηηφπνπ επεμεξγαζία ελφο tag, εηζάγεηαη ην attribute «style», ζην νπνίν δειψλεηαη ε επηζπκεηή κνξθνπνίεζε (παξάδεηγκα : <h1 style="color:blue;fontfamily:courier">απηή είλαη κηα επηθεθαιίδα</h1> ). Γηα επηηφπνπ επεμεξγαζία ελφο νιφθιεξνπ αξρείνπ HTML, εηζάγεηαη ζην head θνκκάηη ηνπ αξρείνπ ην tag <style type= text/css >.</style>, ην νπνίν κέζα ηνπ πεξηέρεη θψδηθα CSS φπσο ζα γξαθφηαλ ζε έλα εμσηεξηθφ αξρείν CSS. Τπάξρνπλ ινηπφλ, ηξεηο ηξφπνη κε ηνπο νπνίνπο κπνξεί θαλείο λα ρξεζηκνπνηήζεη ηε CSS γηα λα νξίζεη θάπνην ζηπι κνξθνπνίεζεο ζε κηα ηζηνζειίδα. ε πεξίπησζε πνπ ζε έλα element εθαξκφδνληαη παξαπάλσ απφ έλα ζηπι κνξθνπνίεζεο, πάληα πξνηεξαηφηεηα έρεη ην πην άκεζν. Πξψην ζε πξνηεξαηφηεηα έξρεηαη ην εζσηεξηθφ ζηπι κνξθνπνίεζεο πνπ εηζάγεηαη κέζα ζην HTML tag. εηξά έρεη ην εζσηεξηθφ ζηπι κνξθνπνίεζεο πνπ εηζάγεηαη ζην head θαη ηέινο ην εμσηεξηθφ ζηπι κνξθνπνίεζεο πνπ βξίζθεηαη ζε μερσξηζηφ αξρείν ηχπνπ CSS. ε πεξίπησζε πνπ δελ έρεη νξηζηεί θαλέλα ζηπι κνξθνπνίεζεο, ηα elements εκθαλίδνληαη κε default ξπζκίζεηο εκθάληζεο νη νπνίεο νξίδνληαη απφ ηνλ browser Η εμέιημε ηεο CSS Όπσο θαη κε ηε γιψζζα HTML, ε CSS πξνηππνπνηείηαη απφ ην δηεζλή νξγαληζκφ W3C (World Wide Web Consortium). Η ηειεπηαία έθδνζε ηεο css είλαη ε CSS3 θαη βξίζθεηαη ζε εμέιημε. Η έθδνζε 3 ηεο CSS πξνζθέξεη ζην ζρεδηαζηή ηε δπλαηφηεηα γηα δεκηνπξγία αθφκα πην εληππσζηαθψλ ζειίδσλ κε 2D θαη 3D γξαθηθά, animation, ηδηαίηεξα πεξηγξάκκαηα, απαιέο κεηαβάζεηο ρξσκάησλ (gradient), πξσηφηππεο γξακκαηνζεηξέο θ.α.. Δπίζεο, ε CSS3 «ιχλεη ηα ρέξηα» ησλ ζρεδηαζηψλ ζειίδσλ θαζψο ιχλεη πξνβιήκαηα παιαηφηεξσλ εθδφζεσλ ηεο css, κε ηελ εηζαγσγή πην εμειηγκέλσλ επηινγέσλ, ςεπδνθιάζεσλ θαη ηδηνηήησλ. Ο νξγαληζκφο W3C έρεη νξγαλψζεη ηε CSS3 ζε modules, φζν αθνξά ηνλ ηξφπν αλάπηπμήο ηεο. Κάζε module απνηειεί ππνζχλνιν ηεο CSS3 πνπ αθνξά θάπνην ζπγθεθξηκέλν ζέκα εκθάληζεο, γηα παξάδεηγκα ην background ή ην layout κηαο ει. 49 απφ 141

50 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ ζειίδαο. Τπάξρνπλ πέληε ζηάδηα αλάπηπμεο ησλ module. ην ηειεπηαίν ζηάδην (ζηάδην «Recommendation»), έλα module ζεσξείηαη πιήξσο νινθιεξσκέλν θαη έηνηκν λα ρξεζηκνπνηεζεί ζηελ πξάμε. 3.4 MySQL SQL Η MySQL είλαη έλα ζχζηεκα δηαρείξηζεο ζρεζηαθψλ βάζεσλ δεδνκέλσλ (RDBMS, Relational Database Management System) θαη ε SQL είλαη ε γιψζζα επεξσηεκάησλ πνπ ρξεζηκνπνηεί SQL Η ηζηνξία ηεο SQL μεθηλά ζηηο αξρέο ηεο δεθαεηίαο ηνπ 70. Η νλνκαζία ηεο είλαη αθξσλχκην ησλ αξρηθψλ «Structured Query Language». Δίλαη κηα γιψζζα δηαρείξηζεο δεδνκέλσλ ζε βάζεηο δεδνκέλσλ ε νπνία είλαη πνιχ θνληά ζηελ αλζξψπηλε γιψζζα θαη ζπλεπψο ζρεηηθά εχθνιε ζηελ εθκάζεζε θαη ρξήζε. Η SQL δηαρεηξίδεηαη ηα δεδνκέλα κηαο βάζεο δεδνκέλσλ κέζσ εξσηεκάησλ. Μέζσ εξσηεκάησλ γίλεηαη αλάθηεζε ησλ επηζπκεηψλ δεδνκέλσλ απφ ηε βάζε, δεκηνπξγνχληαη λένη πίλαθεο, λέεο εγγξαθέο, δηαγξάθνληαη πίλαθεο, πξνζηίζεληαη ή αθαηξνχληαη ζηήιεο, ελεκεξψλνληαη εγγξαθέο θ.α. Οη βαζηθνί φξνη ζε έλα εξψηεκα SQL είλαη: SELECT, FROM θαη WHERE. Μεηά ηελ ιέμε-θιεηδί «SELECT» αθνινπζεί κηα ιίζηα κε ηηο ζηήιεο ηνπ ή ησλ πηλάθσλ πάλσ ζηνπο νπνίνπο εθαξκφδεηαη ην εξψηεκα. Με ην ραξαθηήξα «*» επηιέγνληαη φιεο νη ζηήιεο. Με ηε ιέμε-θιεηδί «FROM» θαζνξίδεηαη ν πίλαθαο ή νη πίλαθεο ζηνπο νπνίνπο ζα εθαξκνζηεί ην εξψηεκα. Με ηε ιέμε θιεηδί «WHERE» πεξηνξίδνληαη ηα απνηειέζκαηα πνπ ζα επηζηξέςεη ην εξψηεκα κε ηε ρξήζε κηαο ή πεξηζζφηεξσλ ζπλζεθψλ. Μηα ζπλζήθε κπνξεί λα ρξεζηκνπνηεί ηειεζηέο (αξηζκεηηθνχο, ζχγθξηζεο, ινγηθνχο). Πέξα απφ δηαθφξσλ εηδψλ ηειεζηέο, ε SQL ππνζηεξίδεη θαη «πλαζξνηζηηθέο ζπλαξηήζεηο», φπσο AVG(), COUNT(), MAX(), MIN(), SUM(), αιιά δηαζέηεη θαη εηδηθνχ ηχπνπ ηειεζηέο. ει. 50 απφ 141

51 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Αθνχ έρνπλ επηιεγεί ηα επηζπκεηά δεδνκέλα κε έλα εξψηεκα, πνιιέο θνξέο είλαη απαξαίηεην ηα απνηειέζκαηα ηνπ εξσηήκαηνο λα εκθαληζηνχλ κε ζπγθεθξηκέλε ηαμηλφκεζε ή/θαη νκαδνπνηεκέλα πξνθεηκέλνπ λα αμηνπνηεζνχλ. Η ηαμηλφκεζε ησλ απνηειεζκάησλ γίλεηαη κε ηε ιέμε θιεηδί «ORDER BY» αθνινπζνχκελε απφ ηε ή ηηο ζηήιεο βάζε ησλ νπνίσλ ζα γίλεη ε ηαμηλφκεζε θαη «ASC» ή «DESC» γηα λα θαζνξηζηεί αλ ε ζεηξά ηαμηλφκεζεο ζα είλαη αχμνπζα ή θζίλνπζα. Με ηε πξφηαζε «GROUP BY», νη γξακκέο ηνπ απνηειέζκαηνο ζα αλαδηαηαρηνχλ θαη ζα ζρεκαηίζνπλ νκάδεο, έηζη ψζηε φια ηα κέιε κηαο νκάδαο λα έρνπλ κεηαμχ ηνπο ίδηα ηα ραξαθηεξηζηηθά βάζε ησλ νπνίσλ έγηλε ε νκαδνπνίεζε. ε πεξίπησζε πνπ είλαη επηζπκεηφ λα πεξηνξηζηνχλ ηα απνηειέζκαηα ηεο πξφηαζεο «GROUP BY», ππάξρεη κηα εηδηθή πξφηαζε ζπλζήθεο εηδηθά γηα απηή ηε πεξίπησζε, ε «HAVING». Όιεο νη παξαπάλσ είλαη νη βαζηθφηεξεο εληνιέο ζχληαμεο εξσηεκάησλ επηινγήο θαη αλάθηεζεο δεδνκέλσλ ζηε γιψζζα SQL. Με ηηο εληνιέο απηέο κπνξνχλ λα γξαθνχλ πνιχ απιά εξσηήκαηα έσο θαη πνιχ πεξίπινθα. Η SQL ππνζηεξίδεη ηα εκθσιεπκέλα εξσηήκαηα θαη ηε ζχδεπμε πηλάθσλ MySQL Δπίζεκνο ηζηφηνπνο: Η MySQL είλαη έλα αλνηρηνχ θψδηθα ζχζηεκα δηαρείξηζεο βάζεσλ δεδνκέλσλ. Δίλαη αξθεηά δηαδεδνκέλε γηα ρξήζε ζε δηθηπαθέο εθαξκνγέο. Υξεζηκνπνηείηαη απφ πνιιά αξθεηά δηαδεδνκέλα site φπσο ην Facebook, ην Twitter, ην YouTube, ηε Wikipedia, ηε Nasa, ηηο δηάθνξεο θπβεξλεηηθέο ηζηνζειίδεο θ.α. Γηα ηε δηαρείξηζε ηεο MySQL ππάξρνπλ πνιιά πξνγξάκκαηα αιιά θαη δηθηπαθέο εθαξκνγέο νη νπνίεο παξέρνπλ αξθεηά εξγαιεία θαη επθνιίεο ζην δηαρεηξηζηή κηαο βάζεο δεδνκέλσλ. Η «επίζεκε» εθαξκνγή ζρεδίαζεο θαη δηαρείξηζεο ηεο ει. 51 απφ 141

52 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ MySQL ε νπνία είλαη πξντφλ ηεο εηαηξίαο «MySQL AB» (εηαηξία ζηελ νπνία άλεθε ε MySQL, ηψξα πηα αλήθεη ζηελ γλσζηή εηαηξία Oracle) ιέγεηαη «MySQL Workbench». Πέξα απφ ην «Workbench» ππάξρνπλ πνιιέο αθφκα πνιχ θαιέο δσξεάλ εθαξκνγέο. ηε παξνχζα εξγαζία, ην πξφγξακκα ζρεδίαζεο θαη δηαρείξηζεο ηεο MySQL πνπ ρξεζηκνπνηήζεθε είλαη ην «phpmyadmin», ην νπνίν ήηαλ έηνηκν ελζσκαησκέλν ζηε πιαηθφξκα δηαρείξηζεο ηεο ηζηνζειίδαο, cpanel. Σν phpmyadmin δηαζέηεη έηνηκα εξγαιεία γηα ηελ επηηφπνπ ζπγγξαθή θαη εθηέιεζε εξσηεκάησλ, ηε γξήγνξε πξνζζήθε λέσλ πηλάθσλ, πεδίσλ, εγγξαθψλ, ηελ εχθνιε εμαγσγή ηεο βάζεο γηα δηαηήξεζε backup θ.α. 3.5 Javascript Δηζαγσγή ζηε Javascript Η Javascript είλαη κηα γιψζζα πξνγξακκαηηζκνχ γηα ην δίθηπν, ε νπνία είλαη εμαηξεηηθά δηαδεδνκέλε ηα ηειεπηαία ρξφληα. Δίλαη κηα δπλακηθή γιψζζα θαζψο είλαη client-side, δειαδή εθηειείηαη απφ ηνλ web browser θαη φρη ζηνλ server φπνπ βξίζθεηαη κηα ζειίδα. Μέζσ ηεο Javascript επηηεινχληαη αιιαγέο ζηελ ηζηνζειίδα, αθνχ έρεη θνξηψζεη πιήξσο ε ζειίδα ζην web browser. Η ζχληαμε ηεο Javascript είλαη επεξεαζκέλε απφ ηελ C θαη «αληηγξάθεη» πνιιά νλφκαηα θαη ζπκβάζεηο νλνκαηνδνζίαο απφ ηε Java. πρλά ιφγσ ηεο νλνκαζίαο Javascript, πνιχο θφζκνο ζπκπεξαίλεη φηη ε Javascript θαη ε Java ζρεηίδνληαη. Παξφια απηά ε Java θαη ε Javascript δελ έρνπλ θακία ζρέζε κεηαμχ ηνπο. πγθεθξηκέλα, ην πξαγκαηηθφ, πξνηππνπνηεκέλν φλνκα ηεο γιψζζαο είλαη «ECMAScript» Ση πξνζθέξεη ε Javascript Πξφθεηηαη γηα κηα γιψζζα πξνγξακκαηηζκνχ ε νπνία εθηειείηαη ζηελ πιεπξά ηνπ πειάηε (client), δειαδή ν θψδηθαο Javascript ζα εθηειεζηεί ζην πξφγξακκα πεξηήγεζεο ηνπ ρξήζηε. Με απηφ ηνλ ηξφπν νη ηζηνζειίδεο γίλνληαη δπλακηθέο ει. 52 απφ 141

53 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα θαζψο κπνξνχλ λα αληαιιάζζνπλ δεδνκέλα αζχγρξνλα κε ηνλ διακομιστή (server) θαη λα αιιάδνπλ δπλακηθά ην πεξηερφκελν ηεο ηζηνζειίδαο πνπ εκθαλίδεηαη. Απηή είλαη ε κεγάιε δηαθνξά πνπ έρεη ε Javascript κε ηελ PHP ε νπνία είλαη κηα γιψζζα πξνγξακκαηηζκνχ πνπ εθηειείηαη ζηνλ δηαθνκηζηή (server-side γιψζζα πξνγξακκαηηζκνχ). Ωζηφζν, δελ πξέπεη λα ππάξρεη ζχγρπζε γηα ην πνηα γιψζζα απφ ηηο δχν είλαη ε θαιχηεξε. Κάζε γιψζζα είλαη ε θαιχηεξε ή ηνπιάρηζηνλ εμαηξεηηθά θαιή γηα ζπγθεθξηκέλεο εξγαζίεο. Γηα παξάδεηγκα, ε ζχλδεζε ζηε βάζε θαη ε αληαιιαγή δεδνκέλσλ είλαη δηαδηθαζίεο πνπ απαηηνχλ κεγάιε αζθάιεηα θαη γηα απηφ πξέπεη λα ρξεζηκνπνηείηαη πάληα ε γιψζζα PHP. Η Javascript είλαη εμαηξεηηθή γιψζζα γηα ηε ξχζκηζε ηεο ζπκπεξηθνξάο ηεο ηζηνζειίδαο. Η Javascript πέξα απφ δπλακηθή είλαη θαη επέιηθηε. Μπνξεί λα έρεη πξφζβαζε ζε πιεζψξα πιεξνθνξηψλ ζρεηηθά κε ηνλ web browser θαη ηελ ίδηα ηελ ηζηνζειίδα θαη κε ηελ αμηνπνίεζε απηψλ ησλ πιεξνθνξηψλ λα παξαρζεί κηα «έμππλε» ηζηνζειίδα. Γηα παξάδεηγκα, ν πξνγξακκαηηζηήο κηαο ηζηνζειίδαο κπνξεί κέζσ Javascript λα νξίζεη πσο ζα ιεηηνπξγεί ε ζειίδα αλάινγα κε ην πνην web browser ρξεζηκνπνηεί ν ρξήζηεο. Έηζη βειηηψλεηαη ε εκπεηξία ησλ ρξεζηψλ ηεο ηζηνζειίδαο θαη πξνζειθχνληαη πεξηζζφηεξνη ρξήζηεο. Δπίζεο, ε Javascript είλαη κηα event-driven γιψζζα πξνγξακκαηηζκνχ. Απηφ ζεκαίλεη φηη κπνξεί λα αληηιακβάλεηαη ζπκβάληα φπσο θάπνηα ελέξγεηα ηνπ ρξήζηε, θάπνηα είζνδν απφ ην πιεθηξνιφγην, ηελ θαηάζηαζε ηεο ηζηνζειίδαο θ.α. ε ζπλδπαζκφ θαη κε ην φηη ε Javascript έρεη ηε δχλακε λα αιιάμεη ηα attributes θαη ην ζηπι εκθάληζεο νπνηνπδήπνηε html element, είλαη πξνθαλέο φηη ε Javascript απνηειεί πνιχ ηζρπξφ εξγαιείν ζηα ρέξηα ελφο πξνγξακκαηηζηή. Πνιχ ζεκαληηθφ θνκκάηη ηεο Javascript είλαη ηα δηάθνξα libraries πνπ θπθινθνξνχλ. Έλα library είλαη νπζηαζηηθά έηνηκνο θψδηθαο Javascript, ζε κνξθή εμσηεξηθψλ αξρείσλ Javascript πνπ κπνξεί λα ελζσκαησζεί ζηνλ θψδηθα κηαο ζειίδαο ηνπηθά (ζην server ηεο ζειίδαο) ή κέζσ θάπνηνπ online host θαη λα παξέρεη ζηνλ πξνγξακκαηηζηή έηνηκεο γηα ρξήζε ζπλαξηήζεηο. Έηζη, ν πξνγξακκαηηζηήο θεξδίδεη πνιχ ρξφλν θαη έρεη ηε δπλαηφηεηα λα πξνζζέζεη ζηελ ηζηνζειίδα ηνπ έηνηκεο εμεηδηθεπκέλεο ιεηηνπξγίεο. Κπθινθνξεί πιεζψξα απφ ει. 53 απφ 141

54 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Javascript libraries νη νπνίεο ζηελ πιεηνςεθία ηνπο είλαη δσξεάλ θαη αλνηρηνχ θψδηθα Βαζηθά ραξαθηεξηζηηθά ηεο Javascript Γηα λα ρξεζηκνπνηήζεη θαλείο ηε γιψζζα Javascript ζηελ ηζηνζειίδα ηνπ έρεη δχν επηινγέο: είηε λα πξνζζέζεη ηνλ θψδηθα Javascript κέζα ζηα αξρεία ηχπνπ HTML, είηε λα δεκηνπξγήζεη μερσξηζηά εμσηεξηθά αξρεία ηχπνπ Javascript κε θαηάιεμε «.js». Η ιχζε ηνπ εμσηεξηθνχ αξρείνπ Javascript είλαη αξθεηά ρξήζηκε θαζψο έηζη δηαρσξίδεηαη ν θψδηθαο HTML απφ ηνλ θψδηθα Javascript θαη κπνξεί εχθνια λα ρξεζηκνπνηεζεί έλα αξρείν Javascript ζε πνιιέο ζειίδεο. Δίλαη δπλαηφ λα ρξεζηκνπνηνχληαη ηαπηφρξνλα θαη νη δχν ηξφπνη. Γηα λα ελζσκαησζεί θψδηθαο Javascript κέζα ζε έλα αξρείν HTML, ρξεζηκνπνηείηαη ην tag <script>, φπνπ κέζα ηνπ γξάθεηαη ν θψδηθαο Javascript. Σν tag <script> κπνξεί λα ρξεζηκνπνηεζεί είηε κέζα ζην <body> είηε κέζα ζην <head>. Γηα λα ρξεζηκνπνηεζεί έλα εμσηεξηθφ αξρείν Javascript, θηάλεη απιά λα δεισζεί ην αξρείν απηφ ζην αξρείν HTML, ζην head ή ζην body, κε ηε ρξήζε ηνπ tag <script>,γηα παξάδεηγκα: <script src="script.js"></script>. ηε Javascript δελ ππάξρεη δηαρσξηζκφο κεηαμχ ησλ δηαθφξσλ εηδψλ κεηαβιεηψλ, φπσο γίλεηαη ζηε C. Γελ ρξεηάδεηαη λα δεισζεί ν ηχπνο δεδνκέλνπ κηαο κεηαβιεηήο, απιά δειψλεηαη κηα κεηαβιεηή κε ην keyword var, ην επηζπκεηφ φλνκα ηεο κεηαβιεηήο θαη ζηε ζπλέρεηα ή απιά γίλεηαη ε αλάζεζε ηηκήο κε ηνλ ηειεζηή αλάζεζεο ίζνλ ή κέλεη αθαζφξηζηε (undefined) ε κεηαβιεηή. Δάλ ε ηηκή πνπ ζα θαηαρσξεζεί είλαη ηχπνπ string, πξέπεη λα κπνπλ δηπιά εηζαγσγηθά δεμηά θαη αξηζηεξά ηεο ηηκήο, αλ πξφθεηηαη γηα array, ν ηηκή πξέπεη λα έρεη ηε κνξθή ["Μαξία", "Αλδξέαο", "Γηψξγνο"];. Οη ζπλαξηήζεηο ζηε Javascript έρνπλ πάληνηε ηελ αθφινπζε κνξθή : function name(parameter1, parameter2, parameter3) { ει. 54 απφ 141

55 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα code to be executed } Μηα ζπλάξηεζε ζα εθηειεζηεί φηαλ ζπκβεί θάπνην event (πρ πάηεζε θάπνην πιήθηξν ν ρξήζηεο) ή φηαλ ηελ θαιέζεη θάπνην άιιν θνκκάηη θψδηθα JQuery Δπίζεκνο ηζηφηνπνο: jquery.com Η jquery είλαη κηα βηβιηνζήθε Javascript ζρεδηαζκέλε λα απινπνηήζεη ηελ πινπνίεζε ζελαξίσλ ζηελ πιεπξά ηνπ πειάηε. Κπθινθφξεζε ηνλ Ιαλνπάξην ηνπ 2006 θαη ρξεζηκνπνηείηαη ζρεδφλ ζην 65% ησλ ηζηνζειίδσλ κε ηελ κεγαιχηεξε επηζθεςηκφηεηα. Η βηβιηνζήθε jquery πεξηέρεη έηνηκεο ζπλαξηήζεηο πνπ κπνξνχλ λα βνεζήζνπλ πνιχ ζηελ δεκηνπξγία αιιά θαη ζηελ ιεηηνπξγία κηαο ηζηνζειίδαο. Μεγάιν πιενλέθηεκα ηεο βηβιηνζήθεο απηήο είλαη φηη έρεη δεκηνπξγεζεί κε ηέηνην ηξφπν ψζηε λα πξνζαξκφδεηαη ζηηο δηαθνξέο κεηαμχ ησλ δηάθνξσλ web browsers. Όπσο δειψλεηαη θαη απφ ην φλνκα ηεο βηβιηνζήθεο απηήο, ε βαζηθή ιεηηνπξγία ηεο jquery έρεη λα θάλεη κε εξσηήκαηα. Μέζσ εξσηεκάησλ επηιέγνληαη θάπνηα elements θαη ζηε ζπλέρεηα γίλνληαη θάπνηεο ελέξγεηεο πάλσ ζε απηά. Η ζχληαμε απηψλ ησλ εξσηεκάησλ ρξεζηκνπνηεί κεηαμχ άιισλ θαη επηινγείο, φπσο ηνπο επηινγείο πνπ ρξεζηκνπνηνχληαη ζηε CSS αιιά θαη επηπιένλ επηινγείο ηεο jquery. ει. 55 απφ 141

56 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ Ο θψδηθαο jquery έρεη πάληνηε ηελ εμήο κνξθή : jquery $(document).ready(function(){ // μέθοδοι jquery }); Η πξψηε γξακκή θάλεη έλαλ έιεγρν εάλ ε ζειίδα έρεη θνξηψζεη θαλνληθά. Μφλν αθνχ θνξηψζεη ε ζειίδα εθηειείηαη ν θψδηθαο κέζα ζηα άγθηζηξα (κέζνδνη jquery). Έλα ηππηθφ παξάδεηγκα κηαο κεζφδνπ jquery είλαη ην αθφινπζν : $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); Με ηνλ επηινγέα $("p")πξνζδηνξίδεηαη φηη ην είδνο ηνπ element πνπ ζα επεξεαζηεί απφ ηνλ θψδηθα πνπ αθνινπζεί είλαη παξάγξαθνο (p). Σν «.click()» είλαη έλα απφ ηα δηάθνξα mouse events πνπ κπνξνχλ λα ζπκβνχλ θαη πξνθαλψο είλαη ην απιφ θιηθ ηνπ πνληηθηνχ. Αλ ινηπφλ γίλεη θιηθ ζε νπνηνδήπνηε element ηχπνπ p ηεο ζειίδαο, εθηειείηαη ε γξακκή «$(this).hide();» φπνπ γίλεηαη ρξήζε ηεο ιέμεο-θιεηδί this θαη ηνπ jquery effect hide(). Η ιεηηνπξγία ηνπ query απηνχ, είλαη λα θξχβεη ηελ παξάγξαθν ζηελ νπνία έρεη γίλεη θιηθ. ει. 56 απφ 141

57 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα MathJax Δπίζεκνο ηζηφηνπνο: Απηφ πνπ δελ ζα κπνξνχζε λα ιείπεη ζε κηα ηζηνζειίδα καζεκαηηθψλ είλαη ηα καζεκαηηθά ζχκβνια θαη νη καζεκαηηθέο παξαζηάζεηο. Παιαηφηεξα, ν κφλνο ηξφπνο γηα λα εηζαρζνχλ φια ηα παξαπάλσ ζε κηα ηζηνζειίδα ήηαλ νη εηθφλεο. Γηα λα κπεη έλα καζεκαηηθφ ζχκβνιν ή κηα παξάζηαζε θνξηψλνληαλ ζηελ ηζηνζειίδα κηα εηθφλα πνπ ην πεξηείρε. Η ηαθηηθή απηή δελ είλαη απνδνηηθή θαζψο είλαη δχζθνιε ε δηαρείξηζε ησλ εηθφλσλ, εηδηθά αλ νη εηθφλεο είλαη πνιιέο. Δπηπιένλ, ην νπηηθφ απνηέιεζκα δελ είλαη θαιαίζζεην θαη νη ζειίδεο αξγνχλ λα θνξηψζνπλ. Η βηβιηνζήθε ΜathJax δίλεη ηε ιχζε ζηα παξαπάλσ πξνβιήκαηα. Beautiful math in all browsers είλαη ην motto ηεο νκάδαο αλάπηπμεο ηνπ MathJax. Σν MathJax είλαη κηα Javascript βηβιηνζήθε πνπ αμηνπνηεί ην ζχζηεκα ζηνηρεηνζεζίαο θεηκέλνπ LaTeX. Ξεθίλεζε ζαλ έξγν ην 2009 θαη ζθνπφ είρε λα ζηακαηήζεη ηελ ρξήζε ζηαηηθψλ εηθφλσλ κε καζεκαηηθά ζχκβνια. ε επίπεδν θψδηθα, ν πξνγξακκαηηζηήο γξάθεη εληνιέο LaTeX. Όηαλ θνξηψλεη κηα ηζηνζειίδα κε εληνιέο LaTeX, ν server ηηο θνξηψλεη απηφκαηα, ηηο κεηαθξάδεη θαη ηηο πξνβάιιεη σο καζεκαηηθά ζχκβνια. Απφ κεξηά ηνπ ρξήζηε ηεο ηζηνζειίδαο, δελ απαηηείηαη λα εγθαηαζηήζεη επηπιένλ ινγηζκηθφ, θαζψο φια γίλνληαη απφ κεξηά ηνπ server. Απηφ ζεκαίλεη φηη ν θψδηθαο πνπ είλαη γξακκέλνο ζε MathJax κπνξεί λα ηξέμεη ζε νπνηαδήπνηε πεξηεγεηή αιιά θαη ζπζθεπή, αθφκα θαη ζε smartphone. Σν MathJax, πέξα απφ ηελ πξνβνιή ησλ καζεκαηηθψλ ζπκβφισλ σο θείκελν, δίλεη θαη θάπνηεο επηπιένλ δπλαηφηεηεο. Γίλεηαη ε δπλαηφηεηα ζην ρξήζηε λα δεη νπνηαδήπνηε καζεκαηηθή παξάζηαζε πην θαζαξά, απιά κε ην λα ηνπνζεηήζεη ηνλ θέξζνξα πάλσ ζηε καζεκαηηθή παξάζηαζε, ή λα θάλεη δηπιφ ή κνλφ θιηθ. Ακέζσο εκθαλίδεηαη κεγεζπκέλε ε καζεκαηηθή παξάζηαζε. Μάιηζηα κε δεμί θιηθ πάλσ ζηελ παξάζηαζε εκθαλίδεηαη έλα menu φπνπ κπνξεί ν ρξήζηεο λα επηιέμεη κε πνην απφ ηνπο ηξεηο ηξφπνπο επηζπκεί λα εκθαλίδνληαη νη κεγεζπκέλεο ει. 57 απφ 141

58 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ παξαζηάζεηο, ηη πνζνζηφ κεγέζπλζεο επηζπκεί θαη λα δεη πνηνο είλαη ν θψδηθαο πνπ θξχβεηαη πίζσ απφ κηα καζεκαηηθή παξάζηαζε. Η αλάιπζε ησλ ζπκβφισλ κπνξεί θαη αιιάδεη απηφκαηα κε απνηέιεζκα λα ππάξρεη πάληα «θαζαξφ» απνηέιεζκα, θάηη πνπ δελ ζα κπνξνχζε λα γίλεη κε ηελ ρξήζε εηθφλσλ, θαζψο έρνπλ ζπγθεθξηκέλν κέγεζνο. Ο πξνγξακκαηηζηήο πνπ γξάθεη ηνλ θψδηθα ηεο ζειίδαο θαη ρξεζηκνπνηεί MathJax έρεη ζηελ δηάζεζε ηνπ κηα ηεξάζηηα πιεζψξα καζεκαηηθψλ ζπκβφισλ άκεζα πινπνηήζηκσλ κε θψδηθα. Οη καζεκαηηθέο παξαζηάζεηο παίξλνπλ απηφκαηα ην ρξψκα ηεο γξακκαηνζεηξάο ηεο ππφινηπεο ζειίδαο, θαζψο είλαη θείκελν θαη φρη εηθφλα. Παξαθάησ, αθνινπζεί έλαο πίλαθαο κε παξαδείγκαηα εληνιψλ LaTeX νη νπνίεο ρξεζηκνπνηήζεθαλ θαη ζηνλ ηζηνζειίδα «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Δληνιέο LaTeX Μαζεκαηηθά ζχκβνια/ παξαδείγκαηα καζεκαηηθψλ παξαζηάζεσλ log 10^{-1} D_{f} \forall \in \leq \ge \gt > \lt < \infty \cup \neq \pi ει. 58 απφ 141

59 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δληνιέο LaTeX Μαζεκαηηθά ζχκβνια/ παξαδείγκαηα καζεκαηηθψλ παξαζηάζεσλ \int \limits_{a}^{b}f(x)\, dx \left(\frac {a}{b} \right) \, Υαξαθηήξαο θελνχ \subset \equiv \leftrightarrow \ldots \lim \limits {x \to μ}g(x) \pm ± f(x)=\begin{cases}x, x \neq 0 \\1, x=0\end{cases} \begin{array}{ c} -1 \leq \frac{x}{y^{2}} \leq 1 \\ y \neq 0 \\ -1 \leq 1 - y \leq 1 \end{array} \iint \limits_{p}f(x,y)\,dx\,dy \textstyle \bigcup_{i=1}^{n} P_{i} JSXGraph Δπίζεκνο ηζηφηνπνο: jsxgraph.uni-bayreuth.de/wp H JSXGraph είλαη κηα cross-browser Javascript βηβιηνζήθε γηα δηαδξαζηηθή γεσκεηξία, ζρεδίαζε γξαθεκάησλ θαη νπηηθνπνίεζε ησλ δεδνκέλσλ ζε ει. 59 απφ 141

60 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ δηαδηθηπαθφ πεξηβάιινλ. Αλαπηχρηεθε απφ ηκήκα Μαζεκαηηθψλ θαη Γηδαθηηθήο ηνπ παλεπηζηεκίνπ Βayreuth ηεο Γεξκαλίαο. Σα πιενλεθηήκαηα ηεο JSXGraph είλαη φηη δνπιεχεη άξηζηα ζε φινπο ηνπο επξέσο ρξεζηκνπνηνχκελνπο πεξηεγεηέο δηθηχνπ, ζε ζπζθεπέο κε νζφλεο αθήο θαη ζε δηάθνξα ιεηηνπξγηθά ζπζηήκαηα. Απφ κεξηά ηνπ ρξήζηε ηεο ηζηνζειίδαο, δελ απαηηείηαη λα εγθαηαζηήζεη επηπιένλ ινγηζκηθφ, θαζψο φια γίλνληαη απφ κεξηά ηνπ server. Η βηβιηνζήθε JSXGraph είλαη κηθξφηεξε θαη πην επέιηθηε απφ αληίζηνηρεο πξνζζήθεο Java θαη παξνπζηάδεη ιηγφηεξα πξνβιήκαηα. Η πξνζζήθε θαη ε ρξήζε ηεο JSXGraph είλαη ζρεηηθά εχθνιε ππφζεζε γηα θάπνηνλ πνπ γλσξίδεη θαιά ηε γιψζζα Javascript. ην δηαδίθηπν ππάξρεη πιεζψξα παξαδεηγκάησλ θαη νδεγψλ πξνεξρφκελε απφ ρξήζηεο ηεο βηβιηνζήθεο. Γηα λα ρξεζηκνπνηήζεη θάπνηνο ηε βηβιηνζήθε JSXGraph ρξεηάδεηαη 3 βαζηθά πξάγκαηα: ηα δχν βαζηθά αξρεία Javascript (ην jsxgraphcore.js θαη ην jsxgraph.css) ηα νπνία κπνξεί θαλείο λα ηα θαηεβάζεη δσξεάλ απφ ην wiki ηεο JSXGraph, έλα άδεην element ηχπνπ «div» φπνπ κέζα ζα κπεη ε γξαθηθή παξάζηαζε, θαη ν θψδηθαο Javascript πνπ ζα πεξηγξάθεη ηελ γξαθηθή παξάζηαζε Mathjs Δπίζεκε ηζηνζειίδα: mathjs.org Η βηβιηνζήθε Mathjs είλαη κηα open source Javascript βηβιηνζήθε ε νπνία ιεηηνπξγεί ππνζηεξηθηηθά ηελ ελζσκαησκέλε βηβιηνζήθε καζεκαηηθψλ ηεο Javascript. Η αλάπηπμή ηεο μεθίλεζε ην Φεβξνπάξην ηνπ 2013 θαη εμειίζζεηαη ζπλερψο. Πξνζθέξεη ζπλαξηήζεηο γηα ηε δηαρείξηζε κεγάισλ αξηζκψλ, κηγαδηθψλ, strings, arrays θαη πηλάθσλ. ει. 60 απφ 141

61 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα 3.6 Joomla Δπίζεκνο ηζηφηνπνο Διιάδαο: Δπίζεκνο ηζηφηνπνο εμσηεξηθνχ: Σν Joomla είλαη έλα ειεχζεξν θαη αλνηθηνχ θψδηθα ζχζηεκα δηαρείξηζεο πεξηερνκέλνπ. Υξεζηκνπνηείηαη γηα ηε δεκνζίεπζε πεξηερνκέλνπ ζηνλ παγθφζκην ηζηφ (World Wide Web) θαη ζε ηνπηθά δίθηπα - intranets. Δίλαη γξακκέλν ζε γιψζζα PHP θαη απνζεθεχεη ηα δεδνκέλα ηνπ ζηε βάζε MySQL. Σν βαζηθφ ραξαθηεξηζηηθφ ηνπ είλαη φηη νη ζειίδεο πνπ εκθαλίδεη είλαη δπλακηθέο, δειαδή δεκηνπξγνχληαη ηελ ζηηγκή πνπ δεηνχληαη. Έλα ζχζηεκα δηαθνκηζηή (server) φπσο είλαη ν Apache ιακβάλεη ηηο αηηήζεηο ησλ ρξεζηψλ θαη ηηο εμππεξεηεί. Με εξσηήκαηα πξνο ηε βάζε ιακβάλεη δεδνκέλα ηα νπνία κνξθνπνηεί θαη απνζηέιιεη ζηνλ web browser ηνπ ρξήζηε. Σν Joomla έρεη θαη άιιεο δπλαηφηεηεο εκθάληζεο φπσο ε πξνζσξηλή απνζήθεπζε ζειίδαο, RSS feeds, εθηππψζηκεο εθδφζεηο ησλ ζειίδσλ, εηδήζεηο, blogs, δεκνζθνπήζεηο, έξεπλεο, θαζψο θαη πνιχγισζζε ππνζηήξημε ησλ εθδφζεψλ ηνπ. Σν ζχζηεκα δηαρείξηζεο Joomla δηαζέηεη έλα αξθεηά εχθνιν ζηελ εθκάζεζε menu δηαρείξηζεο. Γηα απηφ αθξηβψο ην ιφγν κπνξεί λα δηαρσξηζηεί ν ξφινο ηνπ πξνγξακκαηηζηή απφ ην ξφιν ηνπ δηαρεηξηζηή, ρσξίο λα δαπαλεζεί ρξφλνο θαη ρξήκα γηα ηελ αλάπηπμε πιαηθφξκαο δηαρείξηζεο ηεο ηζηνζειίδαο. Ακέζσο κεηά ηελ νινθιήξσζε ηεο αλάπηπμεο κηαο ηζηνζειίδαο, ν ηδηνθηήηεο ηεο ζειίδαο κπνξεί κε ειάρηζηε εθπαίδεπζε λα ελεκεξψλεη ηα άξζξα, λα πξνζζέηεη λέν πεξηερφκελν θαη γεληθψο λα έρεη ζηα ρέξηα ηνπ ηε βαζηθή δηαρείξηζε ηεο ζειίδαο. Με ηελ βνήζεηα ηνπ Joomla κπνξεί ν θαζέλαο λα δεκηνπξγήζεη κηα απιή ηζηνζειίδα ρσξίο λα ρξεηάδεηαη λα έρεη θαζφινπ γλψζεηο πξνγξακκαηηζκνχ. Οη επηινγέο φκσο, πνπ δίλεη ην ζχζηεκα Joomla κέζα απφ ην menu δηαρείξηζεο γηα ηε δηακφξθσζε κηαο ζειίδαο είλαη πνιχ πεξηνξηζκέλεο. Γηα παξάδεηγκα, ζην θνκκάηη ηεο εκθάληζεο, ελψ ππάξρεη πιεζψξα απφ θαιαίζζεηα θαη ελδηαθέξνληα template, φια απαηηνχλ θάπνην ρξεκαηηθφ πνζφ γηα λα κπνξεί θαλείο λα ηα ει. 61 απφ 141

62 Σερλνινγίεο πνπ ρξεζηκνπνηήζεθαλ επεμεξγαζηεί πιήξσο κέζα απφ ην menu δηαρείξηζεο ηνπ ζπζηήκαηνο Joomla. Αιιά αθφκα θαη αλ θάπνηνο αγνξάζεη έλα template, πάιη δελ κπνξεί λα θηλεζεί πνιχ εθηφο ησλ νξίσλ ηνπ template. Οη παξαπάλσ πεξηνξηζκνί αθνξνχλ θπξίσο ηνπο απινχο, ρσξίο γλψζεηο πξνγξακκαηηζκνχ, ρξήζηεο ηνπ Joomla. Έλαο πξνγξακκαηηζηήο κπνξεί λα παξαθάκςεη ην menu δηαρείξηζεο ηνπ Joomla θαη λα επεμεξγαζηεί νηηδήπνηε επηζπκεί, λα πξνζζέζεη δηθφ ηνπ θψδηθα ζε νπνηνδήπνηε ζεκείν ηεο ηζηνζειίδαο. Όια ηα αξρεία κηαο ηζηνζειίδαο Joomla είλαη θαλεξά θαη πξνζβάζηκα ζην πξνγξακκαηηζηή απφ ην server φπνπ είλαη αλεβαζκέλε ε ζειίδα. ηελ παξνχζα πηπρηαθή εξγαζία, ην Joomla ρξεζηκνπνηήζεθε ψζηε λα δεκηνπξγεζεί κηα αξρηθή βαζηθή απιή ηζηνζειίδα πάλσ ζηελ νπνία αλαπηχρζεθε ζηε ζπλέρεηα ε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Σν Joomla δεκηνχξγεζε απηφκαηα έλα νξγαλσκέλν ζχζηεκα αξρείσλ πάλσ ζην νπνίν έγηλαλ νη επηζπκεηέο αιιαγέο θαη πξνζζήθεο. Σν βαζηθφ menu δηαρείξηζεο ρξεζηκνπνηήζεθε ειάρηζηα θαη νη πεξηζζφηεξεο αιιαγέο θαη πξνζζήθεο έγηλαλ απεπζείαο ζηα ππάξρνληα HTML, PHP, Javascript θαη CSS αξρεία κε ηε ρξήζε ελφο απινχ πξνγξάκκαηνο επεμεξγαζίαο πεγαίνπ θψδηθα, ηνπ Crimson editor. ρεηηθά κε θνκκάηη ηεο εκθάληζεο, αξρηθά ρξεζηκνπνηήζεθε έλα δσξεάλ template απφ ηελ ηζηνζειίδα « ηε ζπλέρεηα, πάλσ ζε απηφ ην template έγηλαλ αξθεηέο αιιαγέο κέζσ θψδηθα θαη πξνζηέζεθαλ θάπνηα plugins θαη modules. πλνςίδνληαο, ην Joomla είλαη κηα δσξεάλ θαη αλνηρηνχ θψδηθα web εθαξκνγή δηαρείξηζεο πεξηερνκέλνπ πνπ επηηξέπεη ζηνλ θαζέλα πνπ έρεη βαζηθέο γλψζεηο δηαρείξηζεο κηαο εθαξκνγήο λα δεκηνπξγήζεη κηα γξήγνξε θαη ζρεηηθά ζχγρξνλε ηζηνζειίδα. ηα ρέξηα ελφο πξνγξακκαηηζηή, κπνξεί λα απνδεηρζεί ρξήζηκν εξγαιείν θαη κε ηε ζσζηή ρξήζε ηνπ λα παξαρζεί έλα πνιχ ηθαλνπνηεηηθφ απνηέιεζκα. ει. 62 απφ 141

63 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δπίινγνο Απηά ήηαλ ηα βαζηθά ραξαθηεξηζηηθά ησλ ηερλνινγηψλ πνπ επηιέρζεθαλ λα ρξεζηκνπνηεζνχλ γηα ηελ αλάπηπμε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». Οη ηερλνινγίεο PHP, HTML, CSS θαη SQL νη νπνίεο είλαη εμαηξεηηθά ζεκαληηθέο ζηελ αλάπηπμε δηαδηθηπαθψλ εθαξκνγψλ, δηδάρηεθαλ ζηα πιαίζηα ηνπ πξνγξάκκαηνο ζπνπδψλ ηνπ Σκήκαηνο Μεραληθψλ Πιεξνθνξηθήο. Οη πεξηζζφηεξεο απφ απηέο ηηο ηερλνινγίεο δελ είλαη νη κνλαδηθέο ζην είδνο ηνπο. Γηα παξάδεηγκα ππάξρνπλ θαη άιιεο ηερλνινγίεο γηα ηελ αλαπαξάζηαζε καζεκαηηθψλ ζην δηαδίθηπν πέξα απφ ηε βηβιηνζήθε MathJax, φπσο ε MathML, ή αληί γηα Joomla ζα κπνξνχζε λα ρξεζηκνπνηεζεί Drupal ή Wordpress ή θαη θαλέλα ηέηνηνπ είδνπο ζχζηεκα. Έλαο πξνγξακκαηηζηήο δηαδηθηπαθψλ εθαξκνγψλ έρεη δηαζέζηκεο ζηα ρέξηα ηνπ πάξα πνιιέο αμηφινγεο επηινγέο, ε θάζε κηα κε ηα δηθά ηεο πξνηεξήκαηα θαη κεηνλεθηήκαηα. Μπνξεί θάπνηεο ηερλνινγίεο ή θάπνηνη ζπλδπαζκνί ηερλνινγηψλ λα είλαη θαιχηεξνη ή ρεηξφηεξνη απφ άιινπο. Σν ζεκαληηθφ φκσο, ζε ηειηθή αλάιπζε, είλαη ην ηειηθφ πξντφλ θαη ε εκπεηξία πνπ απνθηάηαη θαηά ηε δηαδηθαζία θαηαζθεπήο απηνχ ηνπ πξντφληνο. ει. 63 απφ 141

64 Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ Κεθάιαην 4o Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ Δηζαγσγή ην θεθάιαην πνπ αθνινπζεί αλαιχνληαη ζπλνπηηθά ηα ινγηζκηθά ηα νπνία ρξεζηκνπνηήζεθαλ γηα ηελ αλάπηπμε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». 4.1 Crimson Editor Δπίζεκνο ηζηφηνπνο: Όιε ε ζπγγξαθή θψδηθα γηα ηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα», έγηλε κε ηε ρξήζε ηνπ Crimson Editor. Δηθόλα 4-1 ει. 64 απφ 141

65 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Σν πξφγξακκα Crimson Editor είλαη έλα ηζρπξφ αιιά θαη εχθνιν ζηε ρξήζε πξφγξακκα επεμεξγαζίαο πεγαίνπ θψδηθα γηα ηα Windows. Δίλαη έλα γξήγνξν θαη ειαθξχ πξφγξακκα, κε απιφ πεξηβάιινλ εξγαζίαο, αιιά θαη έμππλεο ιεηηνπξγίεο. Η εθαξκνγή δηαζέηεη ηηο θιαζηθέο ιεηηνπξγίεο ελφο επεμεξγαζηή θεηκέλνπ, φπσο undo/redo, drag and drop, find and replace θ.α. Τπνζηεξίδεη Unicode θαη θσδηθνπνίεζε UTF-8. Παξέρεη ηε δπλαηφηεηα επεμεξγαζίαο απνκαθξπζκέλσλ αξρείσλ κέζσ ζχλδεζεο ζε FTP server. Αλαγλσξίδεη θαη καξθάξεη κε δηαθνξεηηθά ρξψκαηα ηα ζρφιηα αιιά θαη ιέμεηο-θιεηδηά απφ γιψζζεο φπσο HTML, C / C ++, Perl θαη Java θαη παξέρεη ζην ρξήζηε ηε δπλαηφηεηα λα επηιέμεη πνηεο άιιεο ιέμεηο ή πξνηάζεηο επηζπκεί λα καξθάξνληαη. Δπηηξέπεη ηαπηφρξνλε επεμεξγαζία πνιιψλ αξρείσλ κέζσ tabs θαη ζε πεξίπησζε πνπ έλα απφ ηα αλνηρηά αξρεία ηξνπνπνηεζεί εθηφο ηνπ Crimson, ν ρξήζηεο εηδνπνηείηαη γηα απηφ θαη θνξηψλεηαη ε ηειεπηαία έθδνζε ηνπ αξρείνπ. Αθφκε, δηαζέηεη ελζσκαησκέλν αγγιηθφ ιεμηθφ ην νπνίν κπνξεί λα εκπινπηίζεη ν ρξήζηεο κε λέεο ιέμεηο. πλνιηθά, απνηειεί έλα νινθιεξσκέλν ινγηζκηθφ επεμεξγαζίαο πεγαίνπ θψδηθα. Πιενλεθηήκαηα Δχρξεζην. Γσξεάλ. Απιφ πεξηβάιινλ. Πνιχ κηθξφ ζε φγθν Γξήγνξν ει. 65 απφ 141

66 Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ 4.2 Photoshop Δπίζεκνο ηζηφηνπνο: Δηθόλα 4-2 Όια ηα γξαθηθά ζηνηρεία ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» παξάρζεθαλ κε ηελ βνήζεηα ηνπ Adobe Photoshop. Σo Adobe Photoshop είλαη έλα πξφγξακκα επεμεξγαζίαο εηθφλσλ. Αλαπηχρζεθε θαη θπθινθφξεζε απφ ηελ Adobe Systems. Απνηειεί θνξπθαίν πξφγξακκα επεμεξγαζίαο εηθφλσλ θαη θσηνγξαθηψλ, ην νπνίν εκπηζηεχνληαη εθαηνκκχξηα ζρεδηαζηψλ. Η αλάπηπμε ηνπ μεθίλεζε ην 1988 απφ ηνπο αδεξθνχο Thomas and John Knoll. Η πην πξφζθαηε έθδνζε ηνπ Photoshop είλαη ε Adobe Photoshop CC (2014.2) θαη ει. 66 απφ 141

67 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα θπθινθφξεζε ηνλ Οθηψβξην ηνπ Γηαζέηεη εξγαιεία επεμεξγαζίαο ηξηζδηάζηαησλ αληηθεηκέλσλ, αλάιπζεο πνζνηηθψλ δεδνκέλσλ εηθφλαο θαη παξέρεη ππνζηήξημε ζηνπο λένπ 3D εθηππσηέο.. Καζψο ην Photoshop είλαη ηφζν δηαδεδνκέλν, έλαο αξράξηνο κπνξεί εχθνια λα βξεη εθπαηδεπηηθφ πιηθφ. Τπάξρνπλ πνιιά βίληεν εθκάζεζεο ζηελ επίζεκε ζειίδα ηεο εθαξκνγήο αιιά θαη ζην YouTube, απφ ρξήζηεο ηνπ Photoshop. Ωζηφζν, γηα λα θηάζεη θαλείο απφ ην επίπεδν ηνπ αξραξίνπ ζην επίπεδν ηνπ επαγγεικαηία ρξεηάδεηαη πνιχο ρξφλνο θαη πξνζπάζεηα. Πξφθεηηαη γηα κηα εθαξκνγή κε πνιιέο δπλαηφηεηεο δεκηνπξγίαο-επεμεξγαζίαο εηθφλαο, γηα απηφ ην ιφγν ε εθκάζεζε ηεο δελ είλαη εχθνιε. Γηαζέηεη κεγάιε ζπιινγή ελζσκαησκέλσλ εξγαιείσλ θαη ρξεηάδεηαη αξθεηή εμάζθεζε ψζηε λα αληηιεθζεί θαλείο ζε βάζνο ηε ρξεζηκφηεηα θάζε εξγαιείνπ, ψζηε λα ην ρξεζηκνπνηήζεη κεκνλσκέλα ή ζε ζπλδπαζκφ κε άιια εξγαιεία θαη λα πεηχρεη ην επηζπκεηφ απνηέιεζκα. Σν Photoshop ιεηηνπξγεί κε ηε ινγηθή ησλ layers. Ο ηειηθφο ρξήζηεο βιέπεη απιά κηα εηθφλα, φκσο ζηε πξαγκαηηθφηεηα απηή ε εηθφλα απνηειείηαη απφ πνιιά επίπεδα (layers), ην έλα πάλσ ζην άιιν ζαλ θχιια ηξάπνπιαο. Κάζε layer είλαη κηα εηθφλα ή θάπνην εθέ. Κάζε επίπεδν είλαη απηφλνκν θαη κπνξεί θαλείο λα ην επεμεξγαζηεί μερσξηζηά απφ ηα ππφινηπα. Γίλεηαη κηα εηθνληθή ππεξθάιπςε κεηαμχ ησλ ζηξσκάησλ, ρσξίο ηα ζηξψκαηα λα επεξεάδνπλ ην έλα ην άιιν. Σα βαζηθά παξαγφκελα αξρεία ηνπ Photoshop έρνπλ θαηάιεμε «.psd» πνπ πξνέξρεηαη απφ ηηο ιέμεηο «Photoshop data» θαη απνηεινχλ ζπιινγέο απφ layers. Αθνχ νινθιεξσζεί ε επεμεξγαζία κηαο εηθφλαο ζην Photoshop, ππάξρεη ε δπλαηφηεηα ε εηθφλα απηή λα απνζεθεπηεί κε νπνηνδήπνηε απφ ηα ζπλήζε format αξρείσλ εηθφλαο (.png,.jpeg,.bitmap θ.α.). Σν Photoshop φκσο, «βιέπεη» ηα αξρεία ηχπνπ εηθφλαο απιά σο εηθφλεο ή σο έλα απιφ layer θαη φρη σο ζπιινγή απφ layers. πλεπψο, είλαη δπζθνιφηεξν λα ηα επεμεξγαζηεί ν ζρεδηαζηήο. ηε γιψζζα ησλ πξνγξακκαηηζηψλ, έλα αξρείν «.psd» είλαη ν πεγαίνο θψδηθαο κηαο εηθφλαο θαη έλα αξρείν «.png» ή «.jpeg» είλαη ην εθηειέζηκν. Καιφ είλαη ινηπφλ, νπνηνδήπνηε κηα εηθφλα λα ζψδεηαη πάληα θαη κε format «.psd». ει. 67 απφ 141

68 Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ Αλαθεθαιαηψλνληαο, ην Photoshop πξφθεηηαη γηα κηα εθαξκνγή ε νπνία δίλεη ζηνλ ρξήζηε απίζηεπηεο δπλαηφηεηεο επεμεξγαζίαο-δεκηνπξγίαο θσηνγξαθηψλ ή εηθφλσλ. ηα ρέξηα ελφο επηδέμηνπ ζρεδηαζηή, ην Photoshop κπνξεί λα δεκηνπξγήζεη αιεζηλά ζαχκαηα. Γελ είλαη ηπραίν ην γεγνλφο φηη φπνηε βιέπνπκε κηα πεξίεξγε (γηα λα είλαη αιεζηλή) θσηνγξαθία, ιέκε φηη «είλαη Photoshop». 4.3 FileZilla Δπίζεκνο ηζηφηνπνο: filezilla-project.org Σν FileZilla είλαη κηα αξθεηά δεκνθηιήο δσξεάλ αλνηρηνχ θψδηθα εθαξκνγή κεηαθνξάο αξρείσλ κέζσ internet. Δίλαη κηα cross-platform εθαξκνγή ε νπνία ρξεζηκνπνηεί ηα πξσηφθνιια FTP, FTPS θαη SFTP. Σν FileZilla δηαζέηεη έλα απιφ πεξηβάιινλ εξγαζίαο, δηαζέζηκν ζε πνιιέο γιψζζεο, αλάκεζά ηνπο θαη ηα ειιεληθά. Η ζχλδεζε ζην δηαθνκηζηή γίλεηαη κηα θνξά θαη ηα ζηνηρεία ζχλδεζεο απνζεθεχνληαη, ψζηε ηηο επφκελεο θνξέο λα γίλεηαη άκεζα ε ζχλδεζε. Σν βαζηθφ πεξηβάιινλ εξγαζίαο είλαη ρσξηζκέλν ζε ηέζζεξα ηκήκαηα (εηθφλα 4-3). ηελ θνξπθή, αθξηβψο θάησ απφ ηηο γξακκέο εξγαιείσλ, εκθαλίδνληαη κελχκαηα ζρεηηθά κε ηε θαηάζηαζε ζχλδεζεο, νη εληνιέο πνπ εθηειέζηεθαλ ή εθηεινχληαη θαη νη απαληήζεηο ηνπ server ζε απηέο ηηο εληνιέο. Απφ θάησ αθξηβψο, ε ζειίδα ρσξίδεηαη ζε δχν κέξε: ζηα αξηζηεξά θαίλνληαη ηεξαξρηθά νη ηνπηθνί θαηάινγνη ηνπ ρξήζηε θαη ζηα δεμηά νη θαηάινγνη ηνπ δηαθνκηζηή ζηνλ νπνίν έρεη γίλεη ζχλδεζε. Αθξηβψο απφ θάησ, ζην ρακειφηεξν ζεκείν, εκθαλίδνληαη κε ηε ζεηξά ηα αξρεία πνπ κεηαθέξνληαη ή κεηαθέξζεθαλ θαη δηάθνξα ζηνηρεηά ζρεηηθά κε απηά, φπσο ε θαηάζηαζε κεηαθνξάο ηνπ αξρείνπ, ην κέγεζνο, ν πξννξηζκφο θαη ε πξνέιεπζή ηνπ. ει. 68 απφ 141

69 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 4-3 Πιενλεθηήκαηα Γξήγνξν θαη απνδνηηθφ Γηαρεηξίδεηαη κεηαθνξέο κεγάινπ κεγέζνπο Αζθαιέο Δμ απνζηάζεσο αλαδήηεζε αξρείσλ Φίιηξα Μεηνλεθηήκαηα Γελ κπνξεί λα ρξνλνπξνγξακκαηίζεη κεηαθνξέο ει. 69 απφ 141

70 Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ 4.4 Chrome Δπίζεκνο ηζηφηνπνο: Σν Google Chrome είλαη ν βαζηθφο web browser πνπ ρξεζηκνπνηήζεθε θαηά ηελ αλάπηπμε ηεο «Μαζεκαηηθήο δηδαθηηθήο Ιζηνζειίδαο». Αλαπηχζζεηαη απφ ηελ εηαηξεία-γίγαληα ηνπ δηαδηθηχνπ, Google θαη είλαη ν πην δηαδεδνκέλνο πεξηεγεηήο δηαδηθηχνπ παγθνζκίσο. Η πξψηε επίζεκε έθδνζε ηνπ Chrome δεκνζηεχηεθε ην Γεθέκβξην ηνπ Σν Chrome ππνζηεξίδεη ηα πην δεκνθηιή ιεηηνπξγηθά ζπζηήκαηα θαη ππάξρεη θαη έθδνζή ηνπ δηαζέζηκε γηα smartphones θαη tablets. Δλζσκαησκέλεο δπλαηόηεηεο Αλαπαξαγσγή ήρνπ θαη βίληεν. Πξνβνιή Pdf Google Voice Flash plugin χζηεκα απηφκαηεο ελεκέξσζεο 4.5 TortoiseSVN Δπίζεκνο ηζηφηνπνο: tortoisesvn.net Σν TortoiseSVN είλαη έλα δσξεάλ πξφγξακκα ειέγρνπ θαη δηαρείξηζεο έξγσλ θψδηθα ην νπνίν δηεπθνιχλεη θαη νξγαλψλεη ηελ αλάπηπμε πξνγξακκάησλ. Απνηειεί πξφγξακκα-πειάηε ηνπ Apache Subversion «SVN», ην νπνίν είλαη έλα ζχζηεκα δηαρείξηζεο ησλ δηάθνξσλ εθδφζεσλ ελφο project. Σν TortoiseSVN είλαη κηα επέθηαζε ηνπ ππξήλα ησλ Windows. Υξεζηκνπνηείηαη γηα ηε δηαρείξηζε ησλ αξρείσλ θαη ησλ θαηαιφγσλ ελφο project. Δίλαη ζαλ έλαο server αξρείσλ, κε ηε δηαθνξά φηη πέξα απφ ηελ πην ηειεπηαία έθδνζε ελφο project, δηαηεξεί θαη παιαηφηεξεο εθδφζεηο. Καηαγξάθεη θαη ελεκεξψλεη ηνπο ει. 70 απφ 141

71 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα ρξήζηεο ηνπ γηα φιεο ηηο αιιαγέο πνπ έγηλαλ ζηνλ θψδηθα, ην αθξηβέο ζεκείν ηνπ θψδηθα φπνπ έγηλε ε αιιαγή, πφηε έγηλε θαη απφ πνηφλ. Καηά ηελ αλάπηπμε ελφο project απφ δχν ή πεξηζζφηεξα άηνκα, είλαη αλαγθαίν λα ππάξρεη έλα ζχζηεκα ην νπνίν ζα ελεκεξψλεη φια ηα κέιε ηεο νκάδαο αλάπηπμεο ζρεηηθά κε αιιαγέο πνπ έρνπλ γίλεη ζηνλ θψδηθα ηνπ project. Ο θψδηθαο ελφο project είλαη αλεβαζκέλνο ζηνλ SVN server, ζε έλαλ θαηάινγν πνπ θαιείηαη «repository». Κάζε κέινο ηεο νκάδαο δηαζέηεη ζηνλ ππνινγηζηή ηνπ έλα αληίγξαθν ηνπ repository. To TortoiseSVN παξέρεη κηα εηδηθή ζήκαλζε ζηα αξρεία θαη ηνπο θαθέινπο ηνπ ηνπηθνχ αληηγξάθνπ εξγαζίαο, ψζηε λα εηδνπνηείηαη άκεζα ν ρξήζηεο/κέινο ηεο νκάδαο, αλ ην αληίγξαθν ηνπ project πνπ δηαζέηεη είλαη ελεκεξσκέλν ή φρη ζε ζρέζε κε ην repository ηνπ SVN (εηθφλα 4-4). Δηθόλα 4-4 Με δεμί θιηθ ζην ηνπηθφ αληίγξαθν εξγαζίαο, ν ρξήζηεο κπνξεί λα θαηεβάζεη ζηνλ ππνινγηζηή ηνπ ηηο ηειεπηαίεο αιιαγέο ή λα αλεβάζεη ζην repository ηηο αιιαγέο πνπ έρεη θάλεη ν ίδηνο, ζην δηθφ ηνπ αληίγξαθν κε ηηο επηινγέο «SVN Update» θαη «SVN Commit» (εηθφλα 4-5). ει. 71 απφ 141

72 Λνγηζκηθά πνπ ρξεζηκνπνηήζεθαλ Δηθόλα 4-5 πκπιεξσκαηηθά κε ην TortoiseSVN, ππάξρεη ην βνεζεηηθφ πξφγξακκα TortoiseMerge δηαζέζηκν ζηελ ηζηνζειίδα Tigris.org, ην νπνίν ζπγθξίλεη νπηηθά ηηο δχν δηαθνξεηηθέο εθδφζεηο ελφο αξρείνπ, ηελ παιαηφηεξε θαη ηελ πην πξφζθαηε. Δπίινγνο Δδψ νινθιεξψλεηαη ε παξνπζίαζε ησλ πξνγξακκάησλ πνπ ρξεζηκνπνηήζεθαλ θαηά ηελ αλάπηπμε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο». Τπάξρνπλ θαη άιια ινγηζκηθά δηαζέζηκα ζηελ αγνξά ηα νπνία δηαζέηνπλ παξφκνηεο ιεηηνπξγίεο θαη κπνξνχλ λα παξάμνπλ εμίζνπ θαιφ ή θαη θαιχηεξν απνηέιεζκα. Δίλαη ζην ρέξη ηνπ πξνγξακκαηηζηεί πνηφ απφ φια ζα επηιέμεη αλάινγα κε ηηο πξνηηκήζεηο θαη ηηο αλάγθεο ηνπ. ει. 72 απφ 141

73 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Κεθάιαην 5o Σεθκεξίσζε θώδηθα Δηζαγσγή ην θεθάιαην πνπ αθνινπζεί ζα αλαιπζνχλ ηα ζεκαληηθφηεξα ζεκεία ηνπ πεγαίνπ θψδηθα πνπ βξίζθεηαη πίζσ απφ ηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Ο θψδηθαο βξίζθεηαη ζε κνξθή εηθφλσλ θαη θάησ απφ θάζε εηθφλα αθνινπζνχλ ηα ζρφιηα. Ο θψδηθαο πνπ αλαιχεηαη, βξίζθεηαη ζην cd πνπ ζπλνδεχεη ηε παξνχζα κειέηε. Πξηλ απφ θάζε θνκκάηη θψδηθα αλαθέξεηαη ην path ζην cd. Γηα ηελ θαιχηεξε θαηαλφεζε ηνπ θψδηθα θαη επεηδή αλαπφθεπθηα κεξηθά ζεκεία ηνπ θψδηθα δελ δηαθξίλνληαη αξθεηά θαιά, παξαθαιψ ζπκβνπιεπηείηε ηελ ειεθηξνληθή κνξθή ηνπ θψδηθα. 5.1 Ρπζκηζηήο κεγέζνπο γξακκαηνζεηξάο Path ζην cd: public_html\modules\mod_toolbar\mod_toolbar.php Γξακκέο 30-38: έρνπκε ηελ ζπλάξηεζε sizecontrol, ε νπνία είλαη ππεχζπλε γηα ην κέγεζνο ηεο γξακκαηνζεηξάο ησλ άξζξσλ ηεο ζειίδαο. Γξακκή 32: θηηάρλνπκε κηα ιίζηα κε φια ηα ζηνηρεία ηεο ζειίδαο πνπ έρνπλ ζαλ θιάζε ηελ «article-size». ε απηήλ ηελ θιάζε αλήθνπλ φια ηα άξζξα πνπ είλαη γξακκέλα ζηελ ζειίδα. Γξακκή 34: ηξέρνπκε κηα for γηα λα απνθηήζνπκε πξφζβαζε ζε θάζε έλα ζηνηρείν ηεο ιίζηαο μερσξηζηά ψζηε, Γξακκή 35: λα αιιάμνπκε ην κέγεζνο ηεο γξακκαηνζεηξάο ηνπ θάζε άξζξνπ. ει. 73 απφ 141

74 Σεθκεξίσζε θψδηθα 5.2 Ρπζκηζηήο θσηεηλόηεηαο «Άλαςε - ζβήζε ηα θώηα» Path ζην cd: public_html\modules\mod_toolbar\mod-toolbar.php Γξακκέο 39-75: έρνπκε ηελ ζπλάξηεζε lightscontrol, ε νπνία είλαη ππεχζπλε γηα ηελ ελαιιαγή κεηαμχ θσηεηλψλ θαη ζθνηεηλψλ ρξσκάησλ ζηελ ηζηνζειίδα. Παίδεη ην ξφιν ελφο δηαθφπηε, ελαιιάζζεη κεηαμχ δχν θαηαζηάζεσλ. Ξεθηλά κε έλαλ έιεγρν γηα ην πνηα είλαη ε ησξηλή θαηάζηαζε θαη ηελ αιιάδεη κε ηελ αληίζηξνθε. ει. 74 απφ 141

75 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 40: θάλνπκε έλαλ έιεγρν γηα ην αλ ππάξρεη αληηθείκελν κε id lightson, εθφζνλ βξεζεί ηέηνην αληηθείκελν ζεκαίλεη φηη ε ηξέρνπζα θαηάζηαζε είλαη «αλακκέλα ηα θψηα». Γξακκέο 41-43: αιιάδνπκε ηηο δηάθνξεο παξακέηξνπο ηνπ αληηθεηκέλνπ κε id lightson, φπσο θαη ην ίδην ηνπ ην id ζε «lightsoff». Γξακκέο 44-53: αιιάδνπκε ηηο ζθηέο ησλ mod πνπ έρνπκε, ζπγθεθξηκέλα ηηο απελεξγνπνηνχκε θαζψο «ηα θψηα έζβεζαλ». Γξακκέο 54-56: αιιάδνπκε ηα ρξψκαηα ζην background θαη ζε άιια ζηνηρεία, κε πην ζθνπξφρξσκα. Γξακκέο 58-73: αθνινπζνχκε ηελ ίδηα ινγηθή κε ηε δηαθνξά φηη απηή ηε θνξά «ην θσο είλαη αλακκέλν». Γξακκέο 80-82: νξίδνπκε κηα εηθφλα, ε νπνία παίδεη ην ξφιν ελφο θνπκπηνχ. Γηα λα θαίλεηαη φηη κπνξεί θάπνηνο λα παηήζεη ηελ εηθφλα, νξίζακε ην πνληίθη λα παίξλεη κνξθή pointer φηαλ ν cursor βξίζθεηαη πάλσ απφ ηελ εηθφλα. ει. 75 απφ 141

76 Σεθκεξίσζε θψδηθα 5.3 osb.php- Σν php αξρείν ζην νπνίν γίλεηαη ε ζύλδεζε ζηε βάζε δεδνκέλσλ path ζην cd: public_html\templates\pjo_zonada_free\osb.php Γξακκέο 2,4,6,8: δίλνπκε ηα ζηνηρεία εηζαγσγήο ζηελ βάζε δεδνκέλσλ. Δίλαη ηα ζηνηρεία πνπ εκείο δειψζακε φηαλ δεκηνπξγήζακε ηελ βάζε δεδνκέλσλ (βι Παξαξηήκαηα, «Οδεγφο εγθαηάζηαζεο ηνπ Joomla»). Γξακκή 11: ρξεζηκνπνηνχκε ηα ζηνηρεία πνπ δψζακε γηα λα πξαγκαηνπνηήζνπκε ζχλδεζε ζηελ βάζε δεδνκέλσλ. Γξακκέο 21,22,23: θαηαρσξνχκε ζηηο εζσηεξηθέο κεηαβιεηέο $grade, $nameid θαη $lesson ηηο εμσηεξηθέο κεηαβιεηέο πνπ θνξηψζεθαλ ζην PHP αξρείν κε ηε κέζνδν POST. Οη εμσηεξηθέο κεηαβιεηέο δειψλνληαη ζην ζεκείν πξηλ θιεζεί ην PHP αξρείν. Με απηφλ ηνλ ηξφπν κπνξνχκε λα ρξεζηκνπνηήζνπκε απηέο ηηο κεηαβιεηέο ζην αξρείν PHP (βι. Κεθάιαην 2, 2.2.4). ει. 76 απφ 141

77 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 25: γξάθνπκε έλα query ην νπνίν ζα ην ηξέμνπκε ζηελ βάζε γηα λα ειέγμνπκε αλ ππάξρεη βαζκφο γηα ην ζπγθεθξηκέλν ρξήζηε.. Γξακκή 27: εθηεινχκε ην εξψηεκα. Γξακκή 29: ειέγρνπκε αλ ππάξρεη απνηέιεζκα απφ ην εξψηεκα πνπ έηξεμε. Γξακκή 31: ηελ πεξίπησζε πνπ ππάξρεη ηέηνηα θαηαρψξεζε, ζα γίλεη ελεκέξσζε ηεο θαηαρψξεζεο ζηελ βάζε, κε έλα λέν εξψηεκα. Γξακκή 41: ηελ πεξίπησζε πνπ δελ ππάξρεη ηέηνηα θαηαρψξεζε, ζα γίλεη λέα εηζαγσγή ζηελ βάζε δεδνκέλσλ, κε λέν εξψηεκα. Γξακκέο 35,38,45,48: ην echo πνπ έρνπκε βάιεη ιεηηνπξγεί ζαλ απάληεζε ηεο βάζεο πξνο εκάο, Γξακκέο 35 θαη 45: αλ φια πήγαλ θαιά, επηζηξέθεηαη ν βαζκφο, Γξακκέο 38, 48: καο επηζηξέθεη κήλπκα ιάζνπο, ζηελ πεξίπησζε πνπ δελ πήγαλ φια θαιά. ει. 77 απφ 141

78 Σεθκεξίσζε θψδηθα Γξακκή 64: θαηαρσξνχκε ζηελ κεηαβιεηή $today, ηελ ηξέρνπζα εκεξνκελία, ε νπνία ζα ρξεζηκεχζεη αξγφηεξα. Γξακκή 65: ηξέρνπκε έλα αθφκα εξψηεκα γηα ηελ εηζαγσγή ηνπ απνηειέζκαηνο ζε δεχηεξν πίλαθα ζηελ βάζε, ψζηε λα θξαηάκε έλα ηζηνξηθφ βαζκνινγηψλ. Δδψ ρξεζηκνπνηνχκε ηελ κεηαβιεηή $today. Γξακκή 69: ηεξκαηίδνπκε ηελ ζχλδεζε καο κε ηελ βάζε δεδνκέλσλ, ψζηε λα κελ θαηαλαιψλνληαη πφξνη. 5.4 examjavascript.js path ζην cd: public_html\templates\pjo_zonada_free\js\examjavascript.js Γξακκέο 6-12: έρνπκε ηελ ζπλάξηεζε checkvalue, ε νπνία δέρεηαη κηα απάληεζε θαη έλαλ βαζκφ, ειέγρεη ηελ απάληεζε ηνπ ρξήζηε θαη ζηελ πεξίπησζε πνπ είλαη ιάζνπο επηζηξέθεη ην βαζκφ κεησκέλν θαηά 6. Γξακκή 7: ειέγρεη αλ ε επηινγή είλαη yes θαη επηζηξέθεη απιά ην βαζκφ, ζηε γξακκή 8. Γξακκή 10: επηζηξέθεη ηνλ βαζκφ κεησκέλν θαηά 6 θαζψο ε απάληεζε ήηαλ ιάζνο. ει. 78 απφ 141

79 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 18-45: έρνπκε ηελ ζπλάξηεζε resultexam, ε νπνία αλαιακβάλεη ηελ θιήζε ηεο ζπλάξηεζεο checkvalue ε νπνία ειέγρεη ηηο απαληήζεηο θαη εμάγεη ηνλ βαζκφ, φπσο επίζεο αλαιακβάλεη λα θαιέζεη θαη ην osb.php ην νπνίν δηαρεηξίδεηαη ηελ επηθνηλσλία κε ηε βάζε θαη ζα πεξάζεη ζηελ βάζε δεδνκέλσλ ην απνηέιεζκα. Γξακκή 23: θαηαρσξνχκε ζηε κεηαβήηή nameid. Θα ρξεηαζηεί αξγφηεξα γηα ηελ θαηαρψξεζε ηνπ βαζκνχ ηνπ ρξήζηε ζηε βάζε δεδνκέλσλ. Γξακκέο 24-60: είλαη θψδηθαο AJAX ν νπνίνο θαιεί ην osb.php θαη νξίδεη ηη ζα γίλεη ζηελ πεξίπησζε πνπ εθηειεζηνχλ φια ζσζηά. ει. 79 απφ 141

80 Σεθκεξίσζε θψδηθα Γξακκή 27: θαιείηαη ην osb.php αξρείν. Γξακκή 28: νξίδνληαη θάπνηεο εμσηεξηθέο κεηαβιεηέο ηηο νπνίεο ζα δηαρεηξηζηεί ην PHP αξρείν. Με απηφλ ηνλ ηξφπν εηζάγνπκε κεηαβιεηέο κέζα ζε έλα PHP αξρείν. Μέζα ζηνλ θψδηθα ηνπ osb.php ζα δνχκε πσο δειψλνπκε απηέο ηηο εμσηεξηθέο κεηαβιεηέο, ψζηε λα κπνξεί ην PHP αξρείν λα ηηο δηαρεηξηζηεί. Γξακκή 30: ζέινπκε λα απνθηήζνπκε πξφζβαζε ζε έλα div πνπ ππάξρεη ζηελ ζειίδα καο. ην ζπγθεθξηκέλν div ζα εκθαληζηεί κήλπκα πξνο ηνλ ρξήζηε ζρεηηθά κε ην πσο ηα πήγε ζην test πνπ κφιηο νινθιήξσζε. Γξακκέο 31-33: δίλνπκε θάπνηα ζπγθεθξηκέλα γλσξίζκαηα γηα ην div, φπσο είλαη δηαζηάζεηο θαη ηελ εηθφλα ηνπ background. Γξακκέο 35-41: εηζάγνπκε ζην div ην θείκελν πνπ ζέινπκε λα πεξηέρεη, επίζεο γίλεηαη θαη έλαο έιεγρνο ηνπ απνηειέζκαηνο ηνπ test θαη έηζη ν βαζκφο ζα αιιάδεη ρξψκα. Πρ αλ ν βαζκφο είλαη πάλσ απφ 50 ηφηε ζα είλαη κε πνξηνθαιί ρξψκα, ζηελ πεξίπησζε πνπ είλαη θάησ απφ 50 ηφηε ζα είλαη κε θφθθηλν ρξψκα. ει. 80 απφ 141

81 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 56-65: έρνπκε ηελ ζπλάξηεζε uncheckerror, ε νπνία ειέγρεη αλ ν ρξήζηεο μέραζε λα επηιέμεη θάπνηα απφ ηηο απαληήζεηο ησλ εξσηήζεσλ ηνπ test. Γξακκή 57: ηξέρνπκε κηα επαλάιεςε γηα λα ειέγμνπκε κία-κία ηηο απαληήζεηο ησλ test. Γξακκή 58: αλ ε ηξέρνπζα εξψηεζε έρεη απαληεζεί, θαηαρσξείηαη ζηελ κεηαβιεηή «uncheck» Γξακκή 59: ε κεηαβιεηή «uncheck» ζπγθξίλεηαη κε ην null. Αλ ηζρχεη ε ζχγθξηζε, ν ρξήζηεο δελ έρεη επηιέμεη θακηά απάληεζε γηα ηελ ζπγθεθξηκέλε εξψηεζε θαη έηζη ζηελ γξακκή 60 επηζηξέθεη alert κε αληίζηνηρν κήλπκα. ει. 81 απφ 141

82 Σεθκεξίσζε θψδηθα 5.5 allmatrixfcn.js path ζην cd : public_html\templates\pjo_zonada_free\js\allmatrixfcn.js Γξακκέο 11-33: έρνπκε ηελ ζπλάξηεζε resizematrix ε νπνία αιιάδεη ηηο δηαζηάζεηο ελφο πίλαθα, δέρεηαη ην φλνκα ελφο πίλαθα θαη πνηα δηάζηαζε ζα αιιαρηεί. Γξακκέο 51-58: έρνπκε ηελ ζπλάξηεζε printmatrix, ε νπνία δέρεηαη ην φλνκα ελφο πίλαθα θαη εκθαλίδεη έλα παξάζπξν δηαιφγνπ φπνπ ζα μεθηλήζεη ε εθηχπσζε ηνπ πίλαθα. Γξακκή 53: δειψλνπκε ζηελ κεηαβιεηή divtoprint ην div πνπ πεξηέρεη ηνλ πίλαθα πνπ ζέινπκε λα εθηππψζνπκε. Γξακκή 54: δεκηνπξγνχκε έλα λέν παξάζπξν δηαιφγνπ ζηνλ browser. ει. 82 απφ 141

83 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 55: εηζάγνπκε ην πεξηερφκελν ηεο κεηαβιεηήο divtoprint ζην λέν παξάζπξν. Γξακκή 56: νξίδνπκε ην λέν παξάζπξν λα είλαη παξάζπξν εθηχπσζεο. Γξακκέο 66-73: έρνπκε ηελ ζπλάξηεζε randomizematrix. Η randomizematrix δέρεηαη ην φλνκα ελφο πίλαθα θαη αιιάδεη ηηο ηηκέο ησλ πεδίσλ ηνπ κε ηηκέο απφ -100 έσο θαη 100. Γξακκή 67: Καηαρσξνχκε ηνλ πίλαθα ζε κηα κεηαβιεηή (table). Σνλ εληνπίδνπκε βάζεη ηνπ id. Γξακκέο 68, 69: ηξέρνπκε δχν επαλαιήςεηο γηα λα κπνξέζνπκε λα πξνζπειάζνπκε φιεο ηηο ζέζεηο ηνπ πίλαθα. Γξακκή 70: ρξεζηκνπνηνχκε ηελ ζπλάξηεζε randomint κε νξίζκαηα απφ -100 έσο 100. Κάζε θνξά πνπ ηξέρεη ε ζπλάξηεζε, επηζηξέθεη έλαλ αθέξαην αξηζκφ απφ ην -100 έσο ην 100. Ο αξηζκφο πνπ επηζηξέθεηαη θάζε θνξά θαηαρσξείηαη κέζα ζην αληίζηνηρν πεδίν ηνπ πίλαθα. Γξακκέο 78-87: έρνπκε ηελ ζπλάξηεζε oppositematrix, ε νπνία δέρεηαη έλαλ πίλαθα θαη αιιάδεη ηηο ηηκέο ησλ πεδίσλ ηνπ ζηηο αληίζεηεο. Γξακκή 79: θαηαρσξνχκε ζηελ κεηαβιεηή tablerowlength ην πιήζνο ησλ γξακκψλ ηνπ ζπγθεθξηκέλνπ πίλαθα. ει. 83 απφ 141

84 Σεθκεξίσζε θψδηθα Γξακκή 80: θαηαρσξνχκε ζηελ κεηαβιεηή tablecellslength ην πιήζνο ησλ θειηψλ ηεο θάζε γξακκήο 0 ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκέο 81, 82: ηξέρνπκε δχν επαλαιήςεηο γηα λα κπνξέζνπκε λα πξνζπειάζνπκε φιεο ηηο ζέζεηο ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκέο 83, 84: ρξεζηκνπνηνχκε κηα απηφκαηε ζπλάξηεζε ε νπνία αληηζηξέθεη ην πξφζεκν ησλ ηηκψλ πνπ δέρεηαη. Γέρεηαη ζαλ φξηζκα ηελ ησξηλή ηηκή ηνπ πεδίνπ ηνπ πίλαθα, αληηζηξέθεη ην πξφζεκν θαη κεηά ηελ επηζηξέθεη ζην πεδίν. Γξακκέο : έρνπκε ηελ ζπλάξηεζε matrixdeterminant ε νπνία δέρεηαη ην φλνκα ελφο πίλαθα θαη βξίζθεη ηελ νξίδνπζα ηνπ πίλαθα απηνχ. ει. 84 απφ 141

85 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 100: θαηαρσξνχκε ζηελ κεηαβιεηή tablerowlength ην πιήζνο ησλ γξακκψλ ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκή 101: θαηαρσξνχκε ζηελ κεηαβιεηή tablecellslength ην πιήζνο ησλ θειηψλ ηεο γξακκήο 0 ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκή 102: θάλνπκε έλαλ έιεγρν γηα ην αλ ην πιήζνο ησλ γξακκψλ είλαη ίδην κε ην πιήζνο ησλ θειηψλ, ψζηε λα επηβεβαηψζνπκε φηη ν πίλαθαο είλαη ηεηξαγσληθφο. Δάλ ν πίλαθαο δελ είλαη ηεηξαγσληθφο, δελ νξίδεηαη νξίδνπζα. γξακκέο : θηηάρλνπκε έλαλ λέν πίλαθα θαη ηνλ γεκίδνπκε κε ηα ζηνηρεία πνπ έρεη ν ππάξρσλ πίλαθαο. Γεκηνπξγνχκε δειαδή έλα αληίγξαθν ηνπ πίλαθα. Γξακκέο : δεκηνπξγνχκε έλα θείκελν ην νπνίν ζα ην ρξεζηκνπνηήζνπκε ζαλ ηίηιν γηα ηελ νξίδνπζα. Πρ «orizousa: 14». Γξακκέο : νξίδνπκε έλα EventListener, δειαδή κηα απηνκαηνπνηεκέλε ελέξγεηα, ε νπνία ζα ελεξγνπνηεζεί φηαλ ζπκβεί έλα ζπγθεθξηκέλν γεγνλφο. ηελ ζπγθεθξηκέλε πεξίπησζε ην γεγνλφο πνπ κπνξεί λα ζπκβεί είλαη ν ρξήζηεο λα θάλεη click πάλσ ζηνλ πίλαθα θαη ε απηνκαηνπνηεκέλε ελέξγεηα είλαη λα δηαγξαθεί ην θείκελν κε ηελ νξίδνπζα. Οξίζακε απηφ ην eventlistener, θαζψο ν ρξήζηεο κπνξεί λα αιιάμεη ηηο ηηκέο ηνπ πίλαθα. Αλ αιιαρζνχλ νη ηηκέο ηνπ πίλαθα, ε παιηά νξίδνπζα πνπ εκθαλίδεηαη δελ ζα ηζρχεη, γηα απηφ θαη δηαγξάθεηαη πξνο απνθπγή ζπγρχζεσλ. ει. 85 απφ 141

86 Σεθκεξίσζε θψδηθα Γξακκέο : νξίδνπκε θαη εδψ έλα EventListener, ζε πεξίπησζε πνπ ν ρξήζηεο παηήζεη θάπνην θνπκπί ην νπνίν επεξεάδεη ηνλ πίλαθα, φπνπ θαη πάιη πξέπεη λα δηαγξαθεί ε νξίδνπζα. Γξακκή 122: εηζάγνπκε ην θείκελν ζε παξάγξαθν (<p>). Γξακκή 123: απνθηνχκε πξφζβαζε ζην div φπνπ αλήθεη ν πίλαθαο. Γξακκή 124: εηζάγνπκε ηελ παξάγξαθν(<p>) ε νπνία πεξηέρεη ηελ νξίδνπζα κέζα ζην div ηνπ πίλαθα καο. Έηζη ππνινγίδεηαη θαη εκθαλίδεηαη ε νξίδνπζα ελφο πίλαθα Γξακκέο : έρνπκε ηελ ζπλάξηεζε uppertriangularmatrix ε νπνία δέρεηαη έλαλ πίλαθα θαη ηνλ κεηαηξέπεη ζε άλσ ηξηγσληθφ, αξθεί ν πίλαθαο λα είλαη ηεηξαγσληθφο. Αιιηψο εκθαλίδεηαη αλάινγν κήλπκα, θαζψο κφλν νη ηεηξαγσληθνί πίλαθεο κπνξνχλ λα γίλνπλ άλσ ή θάησ ηξηγσληθνί. Γξακκή 139: θαηαρσξνχκε ζηελ κεηαβιεηή tablerowlength ην πιήζνο ησλ γξακκψλ ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκή 140: θαηαρσξνχκε ζηελ κεηαβιεηή tablecellslength ην πιήζνο ησλ θειηψλ ηεο γξακκήο 0 ηνπ ζπγθεθξηκέλνπ πίλαθα. Γξακκή 141: Διέγρεηαη εαλ ν πίλαθαο είλαη ηεηξαγσληθφο, αιιηψο εθηππψλεηαη ζρεηηθφ κήλπκα. Γξακκή 144: Όζν νη γξακκέο είλαη πεξηζζφηεξεο απφ ηα θειηά, εηζάγνληαη κεδεληθά ζηα θειηά. Με απηφλ ηνλ ηξφπν γεκίδεη φιε ε θάησ ει. 86 απφ 141

87 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα αξηζηεξή γσλία κε κεδεληθά. Με ηελ ίδηα ινγηθή θαηαζθεπάζηεθε θαη ε ζπλάξηεζε lowertriangularmatrix κε ηελ κφλε δηαθνξά φηη ζην αληίζηνηρν ζεκείν ειέγρνπ, θνηηάκε αλ ηα θειηά είλαη πεξηζζφηεξα απφ ηηο γξακκέο. Έηζη κε απηφλ ηνλ ηξφπν γεκίδεη κε κεδεληθά φιε ε πάλσ δεμηά γσλία. Γξακκέο : ππάξρεη ε ζπλάξηεζε closeeditbuttons ε νπνία εμαθαλίδεη φια ηα θνπκπηά πνπ ππάξρνπλ γηα θάπνηνλ ζπγθεθξηκέλν πίλαθα. Γξακκή 719: ελεξγνπνηνχκε ην θνπκπί επεμεξγαζία ηνπ πίλαθα, ην νπνίν απελεξγνπνηείηαη απηφκαηα φζν εκθαλίδνληαη ηα θνπκπηά επεμεξγαζίαο ηνπ πίλαθα. Γξακκή 720: δηαγξάθνπκε ην θνπκπί «κεδέληζε ηνλ πίλαθα». Η δηαγξαθή γίλεηαη αθαηξψληαο ην θνπκπί απφ ηελ νκάδα ησλ θνπκπηψλ επεμεξγαζίαο ηνπ πίλαθα. Με ηνλ ίδην ηξφπν αθαηξνχληαη θαη φια ηα ππφινηπα θνπκπηά επεμεξγαζίαο ηνπ πίλαθα. ει. 87 απφ 141

88 Σεθκεξίσζε θψδηθα Γξακκέο θαη : είλαη νη ζπλαξηήζεηο saveas θαη downloadwithname, νη νπνίεο έρνπλ ηελ ίδηα αθξηβψο ιεηηνπξγία: δέρνληαη δεδνκέλα ζε κνξθή URI, καδί κε θάπνην φλνκα θαη ζψδνπλ απηά ηα δεδνκέλα κε απηφ ην φλνκα ζηνλ ππνινγηζηή ηνπ ρξήζηε. Σηο ρξεζηκνπνηνχκε θαη ηηο δχν θαζψο αλάινγα κε ηνλ πεξηεγεηή, ζε θάπνηνλ ιεηηνπξγεί ε saveas ελψ ζε θάπνηνλ άιιν ιεηηνπξγεί ε downloadwithname. Απηή ε δηαδηθαζία είλαη αξθεηά θνηλή ζε φπνηνλ πξνγξακκαηίδεη ζε web εθαξκνγέο. Ο θάζε πεξηεγεηήο είλαη γξακκέλνο κε άιιν ηξφπν. Πνιιέο θνξέο θψδηθαο ν νπνίνο ηξέρεη θαη ιεηηνπξγεί απξνβιεκάηηζηα ζε θάπνηνλ πεξηεγεηή, ζε άιιν πεξηεγεηή κπνξεί λα κελ παξάγεη ην ίδην απνηέιεζκα ή αθφκα λα κελ ηξέρεη θαη θαζφινπ. Γηα απηφ ν πξνγξακκαηηζκφο web εθαξκνγψλ είλαη ν πην δχζθνινο ζε ζρέζε κε ηνλ πξνγξακκαηηζκφ ζε νπνηαδήπνηε άιιε πιαηθφξκα, θαζψο κηα web εθαξκνγή ζα πξέπεη λα ηξέρεη απξνβιεκάηηζηα ζε πνιινχο πεξηεγεηέο. ει. 88 απφ 141

89 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 753: νξίδνπκε έλα λέν ζηνηρείν ηχπνπ ζπλδέζκνπ. Γξακκή 754: ειέγρνπκε αλ ζηελ ηδηφηεηα download ηνπ ζπλδέζκνπ καο έρνπκε νξίζεη θάπνην θείκελν. Όηαλ νξίδνπκε θάπνην θείκελν ζηελ ηδηφηεηα download, ηφηε εμνξηζκνχ, φηαλ ζα παηάκε ηνλ ζχλδεζκν ζα αλνίγεη ην παξάζπξν απνζήθεπζεο ησλ ζπγθεθξηκέλσλ δεδνκέλσλ κε φλνκα ην θείκελν πνπ νξίζακε. Πρ έρνπκε ην παξαθάησ ζχλδεζκν : <a href="/images/myimage.jpg" download="mylogo"> Όηαλ γίλεη θιηθ ζηνλ ζπγθεθξηκέλν ζχλδεζκν, ζα αλνίμεη έλα παξάζπξν απνζήθεπζεο κε πξνηεηλφκελν φλνκα απνζήθεπζεο ηεο εηθφλαο, mylogo.jpg. ηελ πεξίπησζε πνπ δελ είρακε νξίζεη θάπνηα ηηκή ζηελ ηδηφηεηα download, ην πξνηεηλφκελν φλνκα απνζήθεπζεο ηεο εηθφλαο ζα ήηαλ ην myimage.jpg. Γξακκή 755: πξνζζέηνπκε ηνλ ζχλδεζκν ζην ζψκα ηεο ηζηνζειίδαο. Απηφ ην θάλνπκε θαζψο ν πεξηεγεηήο FireFox απαηηεί ν ζχλδεζκνο λα είλαη ελζσκαησκέλνο ζην ζψκα ηεο ζειίδαο. Γξακκή 756: δίλνπκε ην φλνκα πνπ ζέινπκε λα έρεη ην αξρείν, φηαλ θαηέβεη ζηνλ ππνινγηζηή ηνπ ρξήζηε. Γξακκή 757: νξίδνπκε ζαλ δηεχζπλζε ηνπ ζπλδέζκνπ ηα δεδνκέλα πνπ ζέινπκε λα θαηέβνπλ ζηνλ ππνινγηζηή ηνπ ρξήζηε, ζε κνξθή URI. Σα δεδνκέλα απηά κπνξνχλ λα είλαη εηθφλεο, θείκελν ή αθφκα θαη θάπνην πξφγξακκα. Γξακκή 758: θάλνπκε θιηθ ζηνλ ζχλδεζκν πνπ ελζσκαηψζακε ζηελ ζειίδα, κέζσ θψδηθα. ει. 89 απφ 141

90 Σεθκεξίσζε θψδηθα Γξακκή 759: αθαηξνχκε ηνλ ζχλδεζκν απφ ην ζψκα ηεο ζειίδαο. Γξακκή 760: αλ ηειηθά δελ νξίζακε θείκελν ζηελ ηδηφηεηα download ηνπ ζπλδέζκνπ καο, αληί ν browser λα αλνίμεη ην παξάζπξν απνζήθεπζεο, ζα αλνίμεη κηα λέα θαξηέια φπνπ ζα πξνβάιινληαη ηα δεδνκέλα πνπ έρνπκε ζε κνξθή URI. Απηφ ζπκβαίλεη επεηδή ηα δεδνκέλα καο είλαη ζε κνξθή URI, δελ είλαη αξρεία πνπ βξίζθνληαη θάπνπ απνζεθεπκέλα κέζα ζηνλ server. πλνςίδνληαο, ζηνλ παξαπάλσ θψδηθα δεκηνπξγνχκε έλαλ απιφ ζχλδεζκν, ζηνλ νπνίν νξίδνπκε ζηελ ηδηφηεηα ηνπ download ην φλνκα πνπ ζέινπκε λα έρεη ην αξρείν φηαλ θαηέβεη ζηνλ ππνινγηζηή ηνπ ρξήζηε. ηε ζπλέρεηα νξίδνπκε ζηελ ηδηφηεηα URL ηα δεδνκέλα ζε κνξθή URI, θάλνπκε κε θψδηθα click ζηνλ ζχλδεζκν θαη ηέινο ην δηαγξάθνπκε. Με απηφ ηνλ ηξφπν αλνίγεη έλα λέν παξάζπξν απνζήθεπζεο ησλ δεδνκέλσλ κε ην φλνκα πνπ δεηήζακε. ηελ πεξίπησζε πνπ δελ νξίζνπκε φλνκα ζηελ ηδηφηεηα download ηφηε ζα καο αλνίμεη ζε λέα θαξηέια ηνπ πεξηεγεηή ηα δεδνκέλα πνπ έρνπκε ζε κνξθή URI. Γξακκή 767: έρνπκε ηελ ζπλάξηεζε eventfire, ε νπνία δέρεηαη ην ζηνηρείν θαη ην γεγνλφο πνπ ζέινπκε λα ζπκβεί. ηελ δηθηά καο πεξίπησζε ζέινπκε λα δεκηνπξγήζνπκε ην θιηθ ζε έλαλ ζχλδεζκν. Γξακκή 768: ειέγρνπκε αλ ην ζηνηρείν ππνζηεξίδεη ηελ ηδηφηεηα fireevent, ε νπνία κπνξεί λα ππξνδνηήζεη έλα γεγνλφο. ει. 90 απφ 141

91 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 769: εθφζνλ ην ζηνηρείν καο ππνζηεξίδεη ηελ ηδηφηεηα fireevent, ηελ θαινχκε κε ην γεγνλφο κέζα ζε απηήλ ζαλ παξάκεηξνο. ηελ πξνθεηκέλε πεξίπησζε, ζρεκαηίδνπκε ηελ ηδηφηεηα onclick θαη ην fireevent ππξνδνηεί. Γξακκέο : ζηελ πεξίπησζε πνπ ην ζηνηρείν δελ ππνζηεξίδεη ηελ ηδηφηεηα fireevent, ηφηε δεκηνπξγνχκε ηελ ππξνδφηεζε κέζα ζην document, θαη αθήλνπκε λα ππξνδνηεζεί απφ εθεί ην γεγνλφο. Γξακκή 776: δεκηνπξγνχκε έλαλ ζχλδεζκν. Γξακκή 777: θαηαρσξνχκε ζηελ ηδηφηεηα download ηνπ ζπλδέζκνπ, ην πξνεπηιεγκέλν φλνκα πνπ ζέινπκε λα έρεη ην αξρείν φηαλ ν ρξήζηεο δεηήζεη λα ην θαηεβάζεη ζηνλ ππνινγηζηή ηνπ. Γξακκή 778: θαηαρσξνχκε ηα δεδνκέλα καο ζηελ href ηδηφηεηα ηνπ ζπλδέζκνπ, ζε κνξθή URI. Γξακκή 779: θαινχκε ηελ ζπλάξηεζε eventfire κε νξίζκαηα ηνλ ζχλδεζκν θαη ην γεγνλφο πνπ ζέινπκε λα ζπκβεί. Η δηαθνξά κεηαμχ ηεο saveas θαη ηεο downloadwithname είλαη φηη ζηελ πξψηε απιά εκείο κε θψδηθα θάλνπκε θιηθ ζηνλ ζχλδεζκν, ελψ ζηελ δεχηεξε έρνπκε ππξνδφηεζε γεγνλφηνο πνπ θάλεη ην θιηθ ζηνλ ζχλδεζκν. Γξακκέο : είλαη ε ζπλάξηεζε savetabletoexcel. Γέρεηαη ζαλ φξηζκα έλαλ πίλαθα θαη ηνλ ζψδεη κε ην φλνκα πνπ είρε δψζεη ν ρξήζηεο ει. 91 απφ 141

92 Σεθκεξίσζε θψδηθα ζηνλ ππνινγηζηή ηνπ, ζε κνξθή αξρείνπ ηνπ γλσζηνχ πξνγξάκκαηνο; Excel.. Γξακκή 783: ν ρξήζηεο ελεκεξψλεηαη ππφ ηελ κνξθή alert, φηη ζα μεθηλήζεη ε απνζήθεπζε ηνπ πίλαθα. Γξακκή 784: ειέγρνπκε λα δνχκε πνηνλ browser ρξεζηκνπνηεί ν ρξήζηεο, ψζηε λα θαιέζνπκε ηελ αληίζηνηρε ζπλάξηεζε απνζήθεπζεο. Καζψο δελ ππάξρεη ε ηδαληθή ιχζε λα ηξέρεη ν ίδηνο θψδηθαο ζε φινπο ηνπο πεξηεγεηέο κε ηνλ ίδην ηξφπν, αλαγθαζηηθά πξέπεη λα επηιέγνπκε ηα αληίζηνηρα θνκκάηηα θψδηθα κε ειέγρνπο. Γξακκή 785: δεκηνπξγνχκε έλα αληηθείκελν κε φλνκα blobobject, ην νπνίν είλαη Blob ηχπνπ θαη είλαη απνθιεηζηηθά γηα ηνλ Internet Explorer. Σν αληηθείκελν ηχπνπ Blod παξνπζηάδεη κηα αθνινπζία απφ bytes ε νπνία κνηάδεη πνιχ κε ηελ κνξθή ελφο αξρείνπ θαη είλαη ππεχζπλν λα δεκηνπξγεί θαη λα δηαρεηξίδεηαη πιεζψξα δπαδηθψλ αξρείσλ. Δπί ηεο δεκηνπξγίαο, ην Blob αληηθείκελν δέρεηαη ζαλ φξηζκα ηα δεδνκέλα πνπ ζέινπκε λα ρξεζηκνπνηήζνπκε. Πρ var blobobject = new Blob([new Uint8Array(array)], { type: 'image/png' }); Γξακκή 786: έρνπκε ηελ ζπλάξηεζε window.navigator.mssaveoropenblob, ε νπνία δέρεηαη έλα αληηθείκελν ηχπνπ Blob θαη έλα φλνκα. Σν φλνκα είλαη ην φλνκα πνπ ζα έρεη ην αξρείν φηαλ απνζεθεπηεί ζηνλ ππνινγηζηή ηνπ ρξήζηε. Η ζπλάξηεζε απηή, ζα καο εκθαλίζεη ην παξάζπξν δηαιφγνπ απνζήθεπζεο ή αλνίγκαηνο ησλ δεδνκέλσλ πνπ είρακε θαηαρσξήζεη ζην Blob αληηθείκελν. Αλ ζέιακε λα καο εκθαλίζεη παξάζπξν δηαιφγνπ κφλν κε ηελ επηινγή γηα απνζήθεπζε ζα έπξεπε λα ρξεζηκνπνηήζνπκε window.navigator.mssaveblob. Γξακκή 787: ειέγρνπκε αλ ν πεξηεγεηήο ηνπ ρξήζηε είλαη ην Chrome. ει. 92 απφ 141

93 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 788, 789: θαινχκε ηελ ζπλάξηεζε saveas, ε ν νπνία ιεηηνπξγεί γηα Chrome θαη FireFox. Απηή ε ζπλάξηεζε δέρεηαη ζαλ νξίζκαηα έλα uri θαη ην φλνκα κε ην νπνίν ζα απνζεθεπηνχλ ηα δεδνκέλα. Γξακκέο : έρνπκε ηελ ζπλάξηεζε cnvttabletodata, ε νπνία δέρεηαη ην φλνκα ελφο πίλαθα θαη κεηαηξέπεη ην πεξηερφκελν ηνπ ζε δεδνκέλα, ψζηε λα ηα δηαρεηξηζηεί θάπνηα απφ ηηο ζπλαξηήζεηο απνζήθεπζεο θαη λα ηα ζψζεη αλάινγα κε ηελ επηινγή ηνπ ρξήζηε ζηνλ ππνινγηζηή ηνπ. ει. 93 απφ 141

94 Σεθκεξίσζε θψδηθα 5.6 Μηθξνεθαξκνγή «Γξαθηθέο παξαζηάζεηο» Path ζην cd: θψδηθαο\grafikes.pdf Γξακκή 5: δεκηνπξγνχκε έλα div ην νπνίν είλαη θιάζεο jxgbox. Μέζα ζε απηφ ην div ζα δεκηνπξγεζεί ε γξαθηθή παξάζηαζε. Γξακκέο 6, 8: έρνπκε δχν input ηα νπνία ζα δερηνχλ δεδνκέλα απφ ην ρξήζηε, απαξαίηεηα γηα ηελ γξαθηθή παξάζηαζε, ψζηε λα έρεη ηελ κνξθή πνπ ζέιεη ν ίδηνο ν ρξήζηεο. Γξακκή 10: έρνπκε 3 θνπκπηά. Σo θαζέλα απφ απηά ζα δεκηνπξγήζεη κηα δηαθνξεηηθή ζπλάξηεζε, ζε ζπλδπαζκφ κε ηα δεδνκέλα πνπ εηζήγαγε ν ρξήζηεο. Πρ ην πξψην θνπκπί είλαη γηα ηελ γξαθηθή παξάζηαζε ηεο cosx, ζηελ πεξίπησζε πνπ ν ρξήζηεο έδσζε ζην πξψην πεδίν ηνλ αξηζκφ 10 θαη ζην δεχηεξν πεδίν ηνλ αξηζκφ 5. Παηψληαο ην πξψην θνπκπί ζα δεκηνπξγεζεί ε γξαθηθή παξάζηαζε ηεο 10cos(5x). Αληίζηνηρα ιεηηνπξγνχλ θαη ηα ππφινηπα θνπκπηά. Γξακκή 19: νξίδνπκε έλα αληηθείκελν ηχπνπ box. Γξακκή 20: νξίδνπκε ην αληηθείκελν πνπ ζα θηηάμνπκε λα έρεη εζσηεξηθά φξηα γηα ην πεδίν ηεο γξαθηθήο παξάζηαζεο απφ αξηζηεξά κέρξη -12, απφ πάλσ κέρξη 4, απφ δεμηά κέρξη 12 θαη απφ θάησ κέρξη -4. Δδψ κπνξνχκε λα δψζνπκε φπνηεο δηαζηάζεηο ζέινπκε κε φπνηα ει. 94 απφ 141

95 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα αλαινγία ζέινπκε θαζψο ε βηβιηνζήθε JSXGraph ζα θξνληίζεη γηα απηά. Απηά είλαη ηα αξρηθά φξηα πνπ ζα έρεη ην πεδίν ηεο γξαθηθήο παξάζηαζεο φηαλ θνξηψλεη, κεηά ν ρξήζηεο κπνξεί λα ηα απμήζεη ή λα ηα κεηψζεη. Γξακκή 21: αλαθέξνπκε φηη ζέινπκε λα εκθαλίδνληαη νη άμνλεο κέζα ζην πεδίν ηεο γξαθηθήο παξάζηαζεο. Γξακκή 22: αλαθέξνπκε φηη ζέινπκε λα εκθαλίδεηαη πιέγκα κέζα ζην πεδίν ηεο γξαθηθήο παξάζηαζεο. Γξακκή 28: νξίδνπκε ηνλ καζεκαηηθφ ηχπν ηεο ζπλάξηεζεο, ηεο νπνίαο ζέινπκε λα δεκηνπξγήζνπκε ηελ γξαθηθή παξάζηαζε. ηελ ζπγθεθξηκέλε πεξίπησζε είλαη ηεο ηξηγσλνκεηξηθήο ζπλάξηεζεο cos(x). Καλνληθά ζα γξάθακε κφλν ην Math.cos(x), θαη ζα καο εκθάληδε ηελ γξαθηθή παξάζηαζε ηεο cos(x). ηελ πξνθεηκέλε πεξίπησζε, ε ν ηχπνο ηεο ζπλάξηεζεο ζα ζρεκαηηζηεί απφ ηηο ηηκέο πνπ ζα δψζεη ν ρξήζηεο ζηα αληίζηνηρα πεδία. Γεληθά, ε βηβιηνζήθε JSXGraph παξέρεη πνιιέο δπλαηφηεηεο πνπ κπνξνχκε λα ρξεζηκνπνηήζνπκε γηα λα πεηχρνπκε ην απνηέιεζκα πνπ ζέινπκε, θαη λα δψζνπκε θαη ηελ ειεπζεξία ζηνλ ρξήζηε λα επέκβεη ζε απηέο. Γξακκή 29: νξίδνπκε έλα αληηθείκελν ηχπνπ functiongraph, ην νπνίν είλαη ε γξακκή πνπ ζα ζρεκαηηζηεί ζηνπο άμνλεο. Γξακκή 30: ζπλδένπκε ηελ γξακκή (αληηθείκελν ηχπνπ functiongraph) κε ηoλ καζεκαηηθφ ηχπν ηεο ζπλάξηεζεο πνπ νξίζακε πην πάλσ. Γξακκή 31: ε απηφ ην ζεκείν ηνπ θψδηθα νξίδνπκε ηα φξηα ηεο γξακκήο καο. Θέηνληαο -10, 10 νξίδνπκε φηη απηά ζα είλαη ηα φξηα ζηα νπνία ζα ει. 95 απφ 141

96 Σεθκεξίσζε θψδηθα εκθαλίδεηαη ε «γξακκή». Πξνζνρή δελ έρνπλ θακία ζρέζε κε ηα φξηα ησλ αμφλσλ, ηα νπνία νξίζακε πξνεγνπκέλσο ζηελ γξακκή 20. Γξακκή 32: αιιάδνπκε ην Τ ραξαθηεξηζηηθφ ηεο «γξακκήο» κε απηά ηεο ζπλάξηεζεο καο. Γξακκέο 35,36: ζρεδηάδεηαη ην απνηέιεζκα φισλ ησλ παξαπάλσ ζηνπο άμνλεο Γξακκή 65: έρνπκε κηα ζπλάξηεζε ε νπνία ζα δεκηνπξγήζεη ηελ γξαθηθή παξάζηαζεο ηεο x 3, ιεηηνπξγεί κε ηνλ ίδην ηξφπν πνπ πεξηγξάςακε πην πάλσ. Γξακκή 67: νξίδνπκε ηνλ ηχπν ηεο καζεκαηηθήο ζπλάξηεζεο ηεο νπνίαο ζα θηηάμνπκε ηελ γξαθηθή παξάζηαζε. Γξακκή 69: ζχλδεζε ηεο «γξακκήο» κε ηνλ καζεκαηηθφ ηχπν ηεο ζπλάξηεζεο Γξακκέο 73,75: ζρεδηάδεηαη ην απνηέιεζκα φισλ απηψλ πνπ νξίζακε πην πάλσ ζηνπο άμνλεο. Γξακκή 76: νξίδνπκε κηα παξάγξαθν (<p>), ζηελ νπνία ζα πεξηέρεηαη ν ηχπνο ηεο ζπλάξηεζεο ψζηε λα είλαη μεθάζαξν πνηά ζπλάξηεζε πξνβάιιεηαη ζηνπο άμνλεο. ει. 96 απφ 141

97 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο : νξίδνπκε έλα θνπκπί κε ην νπνίν ν ρξήζηεο ζα κπνξεί λα απνζεθεχζεη ζαλ εηθφλα ηελ γξαθηθή παξάζηαζε πνπ κφιηο δεκηνχξγεζε. Γξακκή 90: θάλεη rendered ην πεδίν ηεο γξαθηθήο παξάζηαζεο κε ην canvas. Γξακκή 92: κεηαηξέπεη ηνλ canvas ζε δεδνκέλα ηχπνπ εηθφλαο. Γξακκή 96: θαιψληαο ηελ saveas ζψδεη ηελ εηθφλα πνπ είρακε κεηαηξέςεη ζε δεδνκέλα κε φλνκα graph.png. Γξακκέο : έρνπκε κηα ζπλάξηεζε ε νπνία είλαη ππεχζπλε λα ζρεδηάδεη πνιιέο γξαθηθέο παξαζηάζεηο ζε έλα πεδίν. Γηα απηφ ην ιφγν ζε θάζε «γξακκή» δίλνπκε εηδηθφ φλνκα ψζηε λα κπνξνχκε λα ηελ δηαρεηξηδφκαζηε μερσξηζηά απφ ηηο άιιεο. πγθεθξηκέλα ηνπο δίλνπκε ID, κε έλαλ αχμσλ αξηζκφ. Οξίζακε ν ρξήζηεο λα έρεη ηε δπλαηφηεηα λα πξνζζέζεη έσο θαη 5 γξαθηθέο παξαζηάζεηο ζε έλα πεδίν. Σν βαζηθφ πξφβιεκα πνπ αληηκεησπίζακε ήηαλ ην πψο θάζε ει. 97 απφ 141

98 Σεθκεξίσζε θψδηθα κηα γξαθηθή παξάζηαζε ζα έρεη δηαθνξεηηθφ ρξψκα ψζηε λα μερσξίδεη, αιιά θαη πνηφ ρξψκα λα είλαη απηφ ψζηε λα μερσξίδεη αξθεηά απφ ηηο ππφινηπεο γξαθηθέο. Δπίζεο, έλα αθφκα πξφβιεκα ήηαλ ην πψο δεκηνπξγνχζακε ίδηα κεηαμχ ηνπο αληηθείκελα, αιιά κε δηαθνξεηηθά ραξαθηεξηζηηθά. Παξαθάησ ζα δνχκε ηηο ιχζεηο πνπ βξήθακε, ψζηε λα δνπιεχνπλ φια φπσο ζέιακε. Γξακκέο : Ο θψδηθαο πνπ γξάςακε γηα λα θηηάρλνπκε αληηθείκελα ίδηνπ ηχπνπ αιιά κε δηαθνξεηηθά ραξαθηεξηζηηθά, ψζηε λα είλαη μερσξηζηά κεηαμχ ηνπο. Η ινγηθή πνπ αθνινπζήζεθε είλαη απηή ηνπ θιψλνπ. Γεκηνπξγήζακε κηα θνξά ηελ κία γξαθηθή παξάζηαζε, κε ηα δηθά ηεο θνπκπηά δηαρείξηζεο (ζρεδίαζε, ε εκθάληζε/απφθξπςε θαη δηαγξαθή). Όιεο νη ππφινηπεο γξαθηθέο παξαζηάζεηο είλαη θιψλνη ηεο πξψηεο, αιιά κε ηελ δηαθνξά φηη έρνπλ δηθά ηνπο γλσξίζκαηα. Δδψ δειαδή, αληί λα γξάθνπκε απφ ηελ αξρή φιν ηνλ θψδηθα γηα ην div, ηα θνπκπηά θαη φια ηα ππφινηπα πνπ είλαη αθξηβψο ίδηα κεηαμχ ηνπο, γξάθνπκε κφλν απηά πνπ ζα ηα θάλνπλ λα μερσξίδνπλ θαη ηα ππφινηπα ραξαθηεξηζηηθά ηα απνθηνχλ απφ ηελ θισλνπνίεζε. Γξακκή 224: κπνξνχκε λα κάζνπκε πφζνη θιψλνη ήδε ππάξρνπλ κέζα ζην div. ει. 98 απφ 141

99 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 225: απμάλνπκε ην id θαηά έλα, εθφζνλ ζέινπκε λα πξνζζέζνπκε αθφκα έλαλ θιψλν. Γξακκή 232: ζέινπκε λα νξίζνπκε ην θνπκπί απφθξπςεο ηνπ θιψλνπ πνπ δεκηνπξγήζακε κφιηο, επνκέλσο πξέπεη λα ηνπ δψζνπκε θάπνην γλψξηζκα θαη θάπνηα ζχλδεζε κε ηνλ θιψλν. Γξακκή 236: ειέγρνπκε πνηνο θιψλνο είλαη ν ηειεπηαίνο πνπ δεκηνπξγήζεθε, έηζη ν ρξήζηεο δελ κπνξεί λα θηηάμεη παξαπάλσ απφ 5 γξαθηθέο παξαζηάζεηο ζην ζχζηεκα αμφλσλ. Γξακκέο : έρνπκε δχν ζπλαξηήζεηο, νη νπνίεο ρξεζηκνπνηνχληαη γηα λα καο δεκηνπξγήζνπλ ηα μερσξηζηά ρξψκαηα γηα ηηο γξακκέο ζηελ γξαθηθή παξάζηαζε. Όηαλ ηξέμεη ε ζπλάξηεζε makecolor, ζα δεκηνπξγήζεη κηα ιίζηα Κάζε ζέζε ζα έρεη έλα μερσξηζηφ ρξψκα. Γξακκέο : ρξεζηκνπνηνχκε ηελ ηξηγσλνκεηξηθή ζπλάξηεζε sin ψζηε λα παξαρζεί έλαο αξηζκφο ν νπνίνο ζα ρξεζηκνπνηεζεί αξγφηεξα. Γξακκή 246: δεκηνπξγνχκε ην ρξψκα, θαιψληαο ηελ ζπλάξηεζε RGB2Color ε νπνία παίξλεη σο φξηζκα ηξεηο αξηζκνχο. Σα ρξψκαηα είλαη δηαιεγκέλα ψζηε λα μερσξίδνπλ αξθεηά κεηαμχ ηνπο. Γξακκή 247: θαηαρσξνχκε ην ρξψκα κέζα ζηελ ιίζηα, γηα λα ην θαιέζνπκε φηαλ ρξεηαζηεί. ει. 99 απφ 141

100 Σεθκεξίσζε θψδηθα Γξακκή 251: είλαη ε ζπλάξηεζε RGB2Color, ε νπνία καο επηζηξέθεη έλα μερσξηζηφ ρξψκα αθνχ ζηξνγγπινπνηήζεη ηνπο ηξεηο αξηζκνχο πνπ εηζάγακε. 5.7 Ιζηνξηθό βαζκνινγηώλ Path ζην cd: θψδηθαο\istoriko.pdf Γξακκή 3: νξίδνπκε έλα εμσηεξηθφ div. Σν ρξεζηκνπνηνχκε ζαλ πιαίζην ζην νπνίν νξίδνπκε σο background-image κηα εηθφλα απφ ζπηξάι ηεηξαδίνπ. Μέζα ζε απηφ ην div δεκηνπξγνχκε 3 άιια div, πνπ ην θαζέλα ζα πεξηέρεη ηελ βαζκνινγία γηα θάζε έλα απφ ηα καζήκαηα πνπ κπνξεί ν ρξήζηεο λα εμεηαζηεί καδί κε ηελ αληίζηνηρε εκεξνκελία εμέηαζεο. Με ιίγα ιφγηα πξφθεηηαη γηα έλα ηζηνξηθφ βαζκνινγηψλ. Γξακκέο 4-6: Πξφθεηηαη γηα ην div ην νπνίν κέζα ηνπ πεξηέρεη ην ηζηνξηθφ βαζκνινγηψλ ηνπ ρξήζηε γηα ην κάζεκα Λνγηζκφο Ι. Σα δεδνκέλα ηα εμάγνπκε απφ ηε βάζε δεδνκέλσλ, φπνπ θαηαρσξνχληαη κφιηο νινθιεξσζεί ην test. ηελ ζπγθεθξηκέλε πεξίπησζε ρξεζηκνπνηνχκε PHP θψδηθα, εθφζνλ απηφο είλαη ν πην αζθαιήο ηξφπνο επηθνηλσλίαο κε ηε βάζε. Σν Joomla δελ επηηξέπεη ηελ εηζαγσγή PHP θψδηθα κέζα ζηα άξζξα ηνπ, γηα ιφγνπο αζθαιείαο. Γηα απηφ έγηλε ε εγθαηάζηαζε ελφο plugin ην νπνίν επηηξέπεη ηελ εηζαγσγή θψδηθα PHP, αξθεί λα βξίζθεηαη αλάκεζα απφ {source} θαη {/source}. ει. 100 απφ 141

101 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 6-27: ν PHP θψδηθαο ν νπνίνο καο επηζηξέθεη φιν ην ηζηνξηθφ ηνπ καζήκαηνο Λνγηζκφο Ι. Γξακκή 8: κε εληνιή JFactory κπνξνχκε λα αλαγλσξίζνπκε ηνλ ζπλδεδεκέλν ρξήζηε θαη καδί φιεο ηηο πιεξνθνξίεο πνπ είλαη πεξαζκέλεο ζηελ βάζε δεδνκέλσλ, πρ κπνξνχκε λα δνχκε ην username ηνπ ρξήζηε, φπσο ζα θάλνπκε παξαθάησ. Γξακκή 9: δεηάκε ην username ηνπ ζπλδεδεκέλνπ ρξήζηε, κπνξνχκε λα δεηήζνπκε κε ηνλ ίδην ηξφπν φπνηεο άιιεο πιεξνθνξίεο νη νπνίεο είλαη απνζεθεπκέλεο ζηελ βάζε δεδνκέλσλ. Γξακκή 10: εθηεινχκε έλα εξψηεκα ζηε βάζε δεδνκέλσλ, γηα λα πάξνπκε ην πιήζνο ησλ θαηαρσξήζεσλ πνπ αθνξνχλ βαζκνινγίεο ησλ ηεζη ηνπ Λνγηζκνχ Ι, γηα ηνλ ζπλδεδεκέλν ρξήζηε.. Γξακκή 11: θαινχκε απφ ηελ βάζε δεδνκέλσλ φιεο ηηο βαζκνινγίεο Λνγηζκνχ Ι, πνπ αθνξνχλ ηνλ ζπλδεδεκέλν ρξήζηε.. Γξακκέο 15-26: ηξέρνπκε δχν επαλαιήςεηο γηα λα εθηππσζνχλ ηα απνηειέζκαηα πνπ εμάγακε απφ ηελ βάζε δεδνκέλσλ. ει. 101 απφ 141

102 Σεθκεξίσζε θψδηθα 5.8 ηαηηθό test Path ζην cd: θψδηθαο\static_test.pdf Έρνπκε δπν εηδψλ test ην ζηαηηθφ θαη ην δπλακηθφ. Σν ζηαηηθφ, φπσο ην ιέεη θαη ε ιέμε πξφθεηηαη γηα έλα test πνπ δελ αιιάδεη, δελ κεηαβάιιεηαη. Δίλαη γξακκέλν ζε html θψδηθα θαη θάζε θνξά πνπ ηξέρεη ζα είλαη πάληα ίδην. ην ζχλνιν, θάζε ηεζη έρεη 15 εξσηήζεηο κε 4 απαληήζεηο κε κία ζσζηή γηα θάζε εξψηεζε. Παξαθάησ ζα δνχκε πσο είλαη γξακκέλν ην ζηαηηθφ test θαη ηνλ θψδηθα πνπ αθνινπζεί, ν νπνίνο δηνξζψλεη απηφκαηα ην test. Γξακκή 4: βιέπνπκε ηελ πξψηε εξψηεζε ηνπ ζηαηηθνχ test. Γξακκέο 5-8: βιέπνπκε ηηο ηέζζεξηο δηαθνξεηηθέο απαληήζεηο ηεο πξψηεο εξψηεζεο. Όιεο έρνπλ ην ίδην name ψζηε λα απνηεινχλ νκάδα, άξα κεηαμχ ηνπο κφλν κία ζα είλαη επηιεγκέλε, δειαδή ν ρξήζηεο κπνξεί λα επηιέμεη απνθιεηζηηθά κία απάληεζε ζε θάζε εξψηεζε. Μφλν κία απφ ηηο απαληήζεηο έρεη value= yes, ε νπνία είλαη θαη ε ζσζηή απάληεζε ζηελ εξψηεζε. Έηζη φηαλ γίλεηαη ε δηφξζσζε, ην Javascript πνπ ηελ πξαγκαηνπνηεί ειέγρεη αλ ην value ηεο επηιεγκέλεο απάληεζεο είλαη yes, θαη έηζη πξάηηεη αλάινγα. Γξακκέο 11-15: είλαη ε δεχηεξε εξψηεζε κε ηηο απαληήζεηο ηεο, ε νπνία ιεηηνπξγεί κε ηνλ ίδην αθξηβψο ηξφπν. Έηζη ζπλερίδεηαη θαη κε ηηο ππφινηπεο εξσηήζεηο κε ηηο απαληήζεηο ηνπο, θαζψο κηιάκε γηα ην ζηαηηθφ test, φζεο θνξέο θαη λα ηξέμεη ην test πάληα ζα είλαη αθξηβψο ην ίδην, νη εξσηήζεηο ζα είλαη νη ίδηεο κε ηελ ίδηα ζεηξά. ει. 102 απφ 141

103 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 9-38: έρνπκε ηελ ζπλάξηεζε trella, (ην φλνκα είλαη ηπραίν) ε νπνία μεθηλά ηελ δηαδηθαζία ηεο δηφξζσζεο. Σν πξψην ζηάδην ηεο δηφξζσζεο είλαη λα ειέγμεη κήπσο ν ρξήζηεο μέραζε λα απαληήζεη ζε θάπνηα εξψηεζε. Αλ ζπλέβε απηφ, ελεκεξψλεη ηνλ ρξήζηε γηα ην πνηα εξψηεζε μέραζε λα απαληήζεη. ηελ ζπλέρεηα ειέγρεη αλ νη επηιεγκέλεο απαληήζεηο έρνπλ ζαλ value ην yes, ψζηε λα πξάμεη αλάινγα. Αλ εληνπηζηεί ιάζνο απάληεζε, απφ ην κέρξη ηψξα βαζκφ αθαηξνχληαη 6 βαζκνί. Ο αξρηθφο βαζκφο είλαη 100. Γξακκή 10: γίλεηαη έλαο έιεγρνο γηα ην αλ ππάξρεη ζπλδεδεκέλνο ρξήζηεο, ψζηε λα έρεη ην δηθαίσκα λα ηξέμεη ην test. Γξακκή 12: έιεγρνο γηα αλαπάληεηεο απαληήζεηο. Γξακκέο 15-30: εθφζνλ έρνπλ δνζεί απαληήζεηο ζε φιεο ηηο εξσηήζεηο δεκηνπξγείηαη έλα div. Σν div απηφ έρεη ηε κνξθή κηαο progress bar, ε νπνία θνξηψλεη κέρξη λα γίλεη ε δηφξζσζε ηνπ test θαη λα ει. 103 απφ 141

104 Σεθκεξίσζε θψδηθα εκθαληζηεί ην αληίζηνηρν div ην νπνίν πεξηέρεη ηε βαζκνινγία ηνπ ρξήζηε γηα ην ηεζη.. Γξακκή 31: πξνζζέηεη ην div πνπ δεκηνπξγήζακε θαη κνξθνπνηήζακε ζην ζψκα ηεο ηζηνζειίδαο καο. Γξακκή 35: θείκελν ην νπνίν εκθαλίδεηαη ζηελ πεξίπησζε πνπ ν επηζθέπηεο ηεο ζειίδαο δελ είλαη ζπλδεδεκέλνο ρξήζηεο Γξακκή 36: κε απηή ηε γξακκή θψδηθα, νξίδνπκε λα εμαθαλίδεηαη ζηαδηαθά ην κήλπκα 5.9 Γπλακηθό test Path ζην cd: θψδηθαο\dynamic_test.pdf Όπσο αλαθέξακε πην πάλσ ππάξρνπλ δχν εηδψλ test ην ζηαηηθφ θαη ην δπλακηθφ. Σψξα ν θψδηθαο πνπ ζα αλαιχζνπκε είλαη απηφο ηνπ δπλακηθνχ. Με ην δπλακηθφ test, θάζε θνξά πνπ ν ρξήζηεο ηξέρεη ην test, απηφ είλαη ηειείσο δηαθνξεηηθφ. Πάιη ν ρξήζηεο ζα πξέπεη λα απαληήζεη 15 εξσηήζεηο κε 4 πηζαλέο απαληήζεηο θαη κηα ζσζηή. ηελ βάζε δεδνκέλσλ έρνπκε θηηάμεη έλαλ πίλαθα φπνπ εθεί έρνπκε θαηαρσξήζεη ηνπιάρηζηνλ 40 εξσηήζεηο κε ηηο απαληήζεηο ηνπο. Κάζε θνξά πνπ ηξέρεη ην δπλακηθφ test θαιεί ηπραία 15 εξσηήζεηο απφ απηέο. ει. 104 απφ 141

105 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 8-30: είλαη ν PHP θψδηθαο ν νπνίνο επηιέγεη θαη επηζηξέθεη 15 ηπραίεο θαη κνλαδηθέο εξσηήζεηο απφ ηελ βάζε δεδνκέλσλ. Γξακκή 9: εξψηεκα κε ην νπνίν παίξλνπκε ην πιήζνο ησλ εξσηήζεσλ ζρεηηθψλ κε ην Λνγηζκφ Ι Γξακκή 11: θηηάρλνπκε έλαλ πίλαθα κε ηφζεο ζέζεηο φζεο θαη νη εξσηήζεηο ζηε βάζε δεδνκέλσλ, ν νπνίνο πεξηέρεη αξηζκνχο απφ ην 1 σο θαη ην πιήζνο ησλ εξσηήζεσλ. Γξακκή 12: αλαθαηεχνπκε ηα ζηνηρεία ηνπ πίλαθα. Έηζη, ζηηο 15 πξψηεο ζέζεηο ηνπ πίλαθα έρνπκε 15 κνλαδηθνχο αξηζκνχο νη νπνίνη θπκαίλνληαη απφ 1 έσο ην πιήζνο ησλ εξσηήζεσλ πνπ βξίζθνληαη ζπλνιηθά ζηε βάζε θαη αθνξνχλ ην Λνγηζκφ Ι. Γξακκέο 16, 17: εξψηεκα κε ην νπνίν δεηάκε απφ ηε βάζε δεδνκέλσλ ηηο εξσηήζεηο πνπ αληηζηνηρνχλ ζηνπο 15 κνλαδηθνχο αξηζκνχο πνπ πεξηέρεη ν πίλαθαο.. Γξακκή 26: ιχλνπκε έλα πξφβιεκα πνπ είρακε αληηκεησπίζεη. Όηαλ θαηαρσξνχζακε ηηο εξσηήζεηο θαη ηηο απαληήζεηο ζηελ βάζε δεδνκέλσλ, δίλακε ζε θάζε νκάδα απαληήζεσλ ην id ηηο εξψηεζεο ηεο βάζεο. Όηαλ φκσο θαινχζακε απηήλ ηελ νκάδα απφ ηελ βάζε ει. 105 απφ 141

106 Σεθκεξίσζε θψδηθα θαη ζέιακε λα θάλνπκε ηελ απηφκαηε δηφξζσζε ππήξρε πξφβιεκα. Η απηφκαηε δηφξζσζε έηξερε γηα 15 εξσηήζεηο κε id νκάδαο απφ 1 κέρξη ην 15, θαη εθφζνλ πξφθεηηαη γηα δπλακηθή δηφξζσζε θαη επίζεο εκείο δελ μέξακε πνηεο εξσηήζεηο ζα έξζνπλ απφ ηελ βάζε, ηειηθά επηιέμακε νη απαληήζεηο λα κελ έρνπλ id κέζα απφ ηελ βάζε, αιιά ηνπο ην νξίδνπκε εκείο ηελ ψξα πνπ ηηο θαινχκε απφ ηελ βάζε. Έηζη θάζε θνξά πνπ ηξέρεη ην test φπνηεο θαη λα είλαη νη εξσηήζεηο κε ηηο απαληήζεηο ηνπο κέζα ζηελ βάζε εκείο δίλνπκε id απφ ην 1 κέρξη ην Login Path ζην cd : public_html\modules\mod_login\tmpl\default.php Γξακκέο 17-23: ν δηαρεηξηζηήο ηεο ηζηνζειίδαο κπνξεί λα επηιέμεη αλ ζηελ πεξηνρή ηνπ Login (αθνχ έρεη γίλεη ην login) ζα εκθαλίδεηαη ην φλνκα ή ην username ελφο ρξήζηε. ηηο παξαπάλσ γξακκέο γίλεηαη ν έιεγρνο γηα ηη απφ ηα δχν έρεη επηιερηεί. Γξακκή 17: αλ ε παξάκεηξνο name πεξηέρεη κεδέλ, ζα εκθαλίδεηαη ην name ηνπ ρξήζηε. Αιιηψο ζα εκθαλίδεηαη ην username ηνπ ρξήζηε. Γξακκή 18: κε απηή ηε γξακκή θψδηθα εθηππψλνπκε απφ ηελ βάζε δεδνκέλσλ ην name ηνπ ζπλδεδεκέλνπ ρξήζηε. Απηή ε εληνιή ηξέρεη κφλν φηαλ ππάξρεη ζπλδεδεκέλνο ρξήζηεο. Γξακκέο 19, 22: θξαηάκε ην username, αιιά «θξπθφ», θαζψο ην ρξεηαδφκαζηε παξαθάησ γηα θάπνηεο ιεηηνπξγίεο. ει. 106 απφ 141

107 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκή 21: κε απηή ηε γξακκή θψδηθα εθηππψλνπκε απφ ηελ βάζε δεδνκέλσλ ην username ηνπ ζπλδεδεκέλνπ ρξήζηε. Απηή ε εληνιή ηξέρεη κφλν φηαλ ππάξρεη ζπλδεδεκέλνο ρξήζηεο. Γξακκέο 25-41: έρνπκε γξάςεη PHP θψδηθα, ν νπνίνο παίξλεη απφ ηελ βάζε ηηο ηειεπηαίεο βαζκνινγίεο ησλ test θαη εκθαλίδεη progress bars, νη νπνίεο γεκίδνπλ ζηαδηαθά κέρξη ηελ αληίζηνηρε βαζκνινγία. Γξακκή 26: παίξλνπκε ην username ηνπ ρξήζηε ν νπνίνο είλαη ζπλδεδεκέλνο. Γξακκή 27: εξψηεκα πξνο ηελ βάζε δεδνκέλσλ, ην νπνίν καο επηζηξέθεη απφ ηνλ πίλαθα jos_grades ηηο ηειεπηαίεο βαζκνινγίεο απφ φια ηα καζήκαηα ηνπ ρξήζηε. Γξακκέο 29-31: εηζάγνπκε ζηηο κεηαβιεηέο $logismos1, $logismos2, $mathematica ηηο αληίζηνηρεο βαζκνινγίεο πνπ πήξακε απφ ηε βάζε Γξακκέο 33-40: νξίδνπκε ηηο κπάξεο πξνφδνπ ζην παξάζπξν login, κε ηα δηάθνξα ραξαθηεξηζηηθά πνπ ζέινπκε. Παξαθάησ ζα δνχκε πσο γξάςακε ηνλ θψδηθα πνπ ρξεηάδεηαη ψζηε λα γεκίδνπλ ζηαδηαθά κέρξη ηελ αληίζηνηρε βαζκνινγία. ει. 107 απφ 141

108 Σεθκεξίσζε θψδηθα Γξακκέο 49-65: Javascript θψδηθαο, ν νπνίνο, κφιηο θνξηψζεη ε ζειίδα, ηξέρεη απηφκαηα κηα ζπλάξηεζε ε νπνία «θνξηίδεη» ηελ πξψηε κπάξα πξνφδνπ. Γξακκή 49: εδψ γίλεηαη ρξήζε ελφο event ηεο βηβιηνζήθεο JQuery. Δίλαη ην event $(document).ready(.). Η ζπλάξηεζε ε νπνία βξίζθεηαη κέζα ζηηο παξελζέζεηο εθηειείηαη κφλν φηαλ θνξηψζεη πιήξσο ε ζειίδα (ready). Δίλαη κηα θαιή πξνγξακκαηηζηηθή πξαθηηθή, θαζψο έηζη πξνιακβάλνληαη πνιιά ζθάικαηα πνπ ζα ζπλέβαηλαλ εάλ έηξερε έλα θνκκάηη θψδηθα Javascript, πξηλ αθφκα θνξηψζνπλ ηα element ηεο ζειίδαο ζηα νπνία αλαθέξεηαη. Γξακκή 50: θαηαρσξνχκε ζηελ κεηαβιεηή grade ηελ ηηκή ηεο πξψηεο κπάξαο πξνφδνπ. Γξακκέο 52-62: έρνπκε κηα ζπλάξηεζε ηελ νπνία θαηαρσξνχκε ζε κηα κεηαβιεηή γηα λα κπνξνχκε λα ηελ ρξεζηκνπνηήζνπκε ζηελ ζπλέρεηα. Γξακκέο 53, 59: ειέγρνπκε εάλ ε ηηκή ηεο κπάξαο πξνφδνπ είλαη ίζε κε ηνλ επηζπκεηφ βαζκφ. Γξακκέο 54, 60: ζηακαηάκε ηελ επαλάιεςε Γξακκέο 56, 57: απμάλνπκε θαηά έλα ηελ ηηκή ηεο κπάξαο πξνφδνπ. ει. 108 απφ 141

109 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο 63, 64: έρνπκε ηελ ζπλάξηεζε setinterval, ε νπνία δέρεηαη ζαλ νξίζκαηα κηα ζπλάξηεζε θαη έλαλ αξηζκφ. Ο αξηζκφο νξίδεη θάζε πφηε ζα ηξέρεη ε ζπλάξηεζε. ηελ ζπγθεθξηκέλε πεξίπησζε, ε ζπλάξηεζε gomore ζα ηξέρεη θάζε 50 ρηιηνζηά ηνπ δεπηεξνιέπηνπ. Όηαλ ζέινπκε λα ηελ ζηακαηήζνπκε απιά γξάθνπκε clearinterval. Γξακκή 63: θαηαρσξνχκε ηελ setinterval ζε κηα κεηαβιεηή, γηα λα κπνξνχκε λα ηελ ειέγμνπκε ζε άιιν ζεκείν ηνπ θψδηθα πην πάλσ, ψζηε λα ηελ ζηακαηήζνπκε. πλνπηηθά, ζηνλ παξαπάλσ θψδηθα: έρνπκε ηελ gomore ε νπνία απμάλεη θαηά έλα ηελ ηηκή ηεο κπάξαο πξνφδνπ. Υξεζηκνπνηήζακε ηελ setinterval ε νπνία ζηελ πξαγκαηηθφηεηα είλαη κηα for κε ηελ ηδηφηεηα λα ειέγρεη ηνλ ρξφλν ηεο θάζε επαλάιεςεο. Έηζη επηηπγράλεηαη ε ζηαδηαθή θφξηηζε ησλ progress bar. ει. 109 απφ 141

110 Σεθκεξίσζε θψδηθα 5.11 index.php Path ζην cd: public_html\templates\pjo_zonada_free\index.php ην αξρείν index.php νξίδνληαη ηα βαζηθά modules ηεο ηζηνζειίδαο, δειψλνληαη ηα αξρεία Javascript θαη CSS αξρεία πνπ ζα ρξεζηκνπνηεζνχλ, ηα banner ζηα δεμηά ηεο ζειίδαο. Γξακκέο 34-50: θνξηψλνπκε κέζα ζην head, ηα CSS θαη ηα Javascript αξρεία πνπ ρξεηάδνληαη γηα λα ιεηηνπξγήζεη ζσζηά ε ζειίδα καο. Γξακκέο : θνξηψλνπκε φια ηα πιατλά banner πνπ είλαη ζχλδεζκνη γηα δηάθνξεο ελδηαθέξνπζεο ηζηνζειίδεο. ει. 110 απφ 141

111 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Γξακκέο : PHP θψδηθαο, ν νπνίνο ειέγρεη αλ ππάξρνπλ modules ζηελ αξηζηεξή κεξηά ηεο ηζηνζειίδαο θαη ηα θνξηψλεη. Η «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα» σζηφζν, δελ δηαζέηεη modules ζην αξηζηεξφ κέξνο ηεο ηζηνζειίδαο. Γξακκή 171: ειέγρεη ζηελ βάζε δεδνκέλσλ, κέζα ζηνλ πίλαθα modules αλ έρνπλ νξηζηεί modules γηα ην αξηζηεξφ κέξνο ηεο ζειίδαο. Ο πίλαθαο modules πεξηέρεη φια ηα modules ηεο ζειίδαο καο θαη εθεί κέζα, ζε αλάινγν πεδίν δειψλεηαη ζε πνηα ζέζε ζα εκθαλίδεηαη θάζε module, αξηζηεξά, δεμηά ή θέληξν. ηνλ ίδην πίλαθα ππάξρεη αλάινγν πεδίν ην ζην νπνίν επηιέγεηαη εάλ ζα είλαη ελεξγφ έλα module ή φρη.. Σν Joomla, κέζα απφ ην menu δηαρείξηζεο επηηξέπεη ηελ αιιαγή ησλ default επηινγψλ αιιά φρη ηελ πξνζζήθε λέσλ. Γειαδή κέζσ ηνπ Joomla δελ γίλεηαη δηαρείξηζε ηεο βάζεο δεδνκέλσλ, κφλν ελεκέξσζε. Η δηαρείξηζε ηεο βάζεο δεδνκέλσλ γίλεηαη κέζσ ηεο πιαηθφξκαο δηαρείξηζεο βάζεσλ δεδνκέλσλ, phpmyadmin. Γξακκέο 172, 173: αθνχ βξεη αξηζηεξά modules ηφηε δεκηνπξγεί ηα αλάινγα div, ψζηε λα ηα εηζάγεη κέζα ζε απηά. Γξακκή 174: θαινχληαη φια ηα modules πνπ ε ζέζε ηνπο βξίζθεηαη αξηζηεξά (name: left). Με ηνλ ίδην ηξφπν εηζάγνπκε θαη απηά πνπ είλαη δεμηά απιά αιιάδνληαο ηελ ηηκή ηνπ name ζε right. ει. 111 απφ 141

112 Σεθκεξίσζε θψδηθα Δπίινγνο Απηά ήηαλ ηα θνκκάηηα θψδηθα πνπ ζεσξήζεθαλ αμηνζεκείσηα. Όπσο αλαθέξζεθε ζηελ Πεξίιεςε, ζει. 7, ην βηβιίν απηφ γξάθηεθε κε ζθνπφ λα ρξεζηκεχζεη σο εθπαηδεπηηθφ αλάγλσζκα ζηνπο θνηηεηέο ηνπ ηκήκαηνο Μεραληθψλ Πιεξνθνξηθήο. Γηα ην ιφγν απηφ, πεξηγξαθή ηνπ θψδηθα έγηλε κε φζν πην απιφ ηξφπν γηλφηαλ κε ζθνπφ λα γίλεη θαηαλνεηφο. Ο παξαπάλσ θψδηθαο αιιά θαη ην ζχλνιν ησλ αξρείσλ ηεο ηζηνζειίδαο βξίζθνληαη ζην ζπλνδεπηηθφ cd. ει. 112 απφ 141

113 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Κεθάιαην 6o Δκθάληζε ηζηνζειίδαο Η επηινγή ρξσκάησλ, εηθφλσλ θαη γξαθηθψλ γηα κηα ηζηνζειίδα δελ είλαη κηα δηαδηθαζία ε νπνία κπνξεί λα ζεσξεζεί εχθνιε ππφζεζε. Αλαπφθεπθηα, ε πξψηε εληχπσζε είλαη πνιχ ζεκαληηθή θαη ζε πνιιέο πεξηπηψζεηο θαζνξηζηηθή. Μηα ηζηνζειίδα κε άζρεκε ή αηαίξηαζηε γηα ην πεξηερφκελφ ηεο εκθάληζε πνιχ πηζαλφλ λα απσζήζεη ηνπο επηζθέπηεο ηεο, αθφκα θαη αλ ζαλ ηζηνζειίδα δηαζέηεη εμαηξεηηθφ πεξηερφκελν. Γηα ην ιφγν απηφ, νη κεγάιεο εκπνξηθέο εηαηξίεο δαπαλνχλ κεγάια ρξεκαηηθά πνζά θαη απαζρνινχλ ζρεδηαζηέο, εηδηθνχο ηνπ marketing θαη ςπρνιφγνπο γηα ηε ζρεδίαζε ησλ ηζηνζειίδσλ ηνπο. Σν πεξηβάιινλ κηαο εθπαηδεπηηθήο ηζηνζειίδαο πξέπεη λα είλαη θηιηθφ θαη πξνζηηφ, κε ζρεηηθά νπδέηεξα αιιά θσηεηλά ρξψκαηα θαη επαλάγλσζην θείκελν. Πξέπεη λα είλαη έλα πεξηβάιινλ αξθεηά εληππσζηαθφ ψζηε λα θηλήζεη ην ελδηαθέξνλ ηνπ εθπαηδεπφκελνπ αιιά φρη ππεξβνιηθά εληππσζηαθφ, ψζηε λα επηζθηάζεη ηνλ ζηφρν ηεο ηζηνζειίδαο. Η εκθάληζε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» ζρεδηάζηεθε κε βάζε ηηο παξαπάλσ αξρέο θαη κε ηε βνήζεηα online εξγαιείσλ. Τπάξρεη πιεζψξα απφ online εξγαιεία πνπ κπνξεί λα ρξεζηκνπνηήζεη έλαο ζρεδηαζηήο γηα λα επηιέμεη ηα θαηάιιεια ρξψκαηα γηα κηα ηζηνζειίδα. Απιέο παιέηεο ρξσκάησλ, εθαξκνγέο πνπ παξάγνπλ απηφκαηα ζπλδπαζκνχο ζπκπιεξσκαηηθψλ ρξσκάησλ, εθαξκνγέο νη νπνίεο ειέγρνπλ εάλ ε αληίζεζε κεηαμχ δχν ρξσκάησλ είλαη ηθαλή ψζηε λα ρξεζηκνπνηεζνχλ απηά ηα ρξψκαηα γηα θφλην θαη ρξψκα γξακκαηνζεηξάο. Οη online εθαξκνγέο πνπ ρξεζηκνπνηήζεθαλ είλαη: ColorZilla: δσξεάλ επέθηαζε ηνπ Google Chrome. Πξφθεηηαη γηα κηα απιή θαη εχρξεζηε εθαξκνγή ε νπνία, κεηαμχ άιισλ, «δηαβάδεη» ην ρξψκα νπνηνπδήπνηε ζεκείνπ κέζα ζην browser, ππνινγίδεη πνηνο είλαη ν RGB θσδηθφο θαη ηνλ απνζεθεχεη απεπζείαο ζην πξφρεηξν γηα άκεζε ρξήζε. ει. 113 απφ 141

114 Δκθάληζε ηζηνζειίδαο : πξφθεηηαη γηα κηα απιή παιέηα ρξσκάησλ, ζαλ ηελ παιέηα ρξσκάησλ ηνπ πξνγξάκκαηνο δσγξαθηθήο ησλ Windows, ε νπνία επηπιένλ πξνβάιιεη ηνπο HSV, RGB θαη δεθαεμαδηθνχο θσδηθνχο ηνπ ζεκείνπ ηεο παιέηαο πνπ επηιέγεη ν ρξήζηεο αιιά θαη αληίζηξνθα, δέρεηαη νπνηνλδήπνηε απφ απηνχο ηνπο θσδηθνχο θαη πξνβάιιεη ην ρξψκα πνπ αληηπξνζσπεχνπλ. online εθαξκνγή ε νπνία ειέγρεη εάλ ε αληίζεζε κεηαμχ δχν ρξσκάησλ είλαη αξθεηή ψζηε λα ρξεζηκνπνηεζνχλ ζαλ θφλην θαη ρξψκα γξακκαηνζεηξάο. ηνλ παξαθάησ πίλαθα παξαηίζεληαη ηα ρξψκαηα πνπ ρξεζηκνπνηήζεθαλ ζηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα», κε ηνπο αληίζηνηρνπο θσδηθνχο ζε δεθαεμαδηθή θαη RGB κνξθή. θψηα R G B hexadecimal ρξψκα on #e2da99 on/off # on/off #5c5333 on/off #5e9ca0 on #73afb6 off # off #51504a Όιεο νη εηθφλεο πνπ ρξεζηκνπνηήζεθαλ θαη εκθαλίδνληαη ζηελ «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα» πξνέξρνληαη απφ ηελ ηζηνζειίδα pixabay.com/el ε νπνία παξέρεη ειεχζεξα δηαζέζηκεο εηθφλεο ππφ ηελ άδεηα Creative Commons. Σέινο, ηα ινγφηππα ησλ ινγηζκηθψλ Mathematica θαη Geogebra ηα νπνία εκθαλίδνληαη ζην image slider αλήθνπλ ζηελ εηαηξία Wolfram θαη ην International Geogebra Institute αληίζηνηρα. ει. 114 απφ 141

115 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Κεθάιαην 7o ύλνςε 7.1 Γεληθά ζπκπεξάζκαηα ηεο κειέηεο Ο ζηφρνο ηεο πηπρηαθήο ήηαλ ε αλάπηπμε κηαο ζχγρξνλεο ηζηνζειίδαο ε νπνία ζα πξφζθεξε ζηνπο ρξήζηεο εθπαηδεπηηθφ πιηθφ θπξίσο γηα ηα καζεκαηηθά αιιά θαη πιεξνθνξίεο γηα ηα γλσζηά ινγηζκηθά καζεκαηηθψλ, Mathematica θαη Geogebra θαη ηελ επηζηήκε ηεο δηδαθηηθήο. Πέξα απφ νξηζκνχο, ζεσξία θαη παξαδείγκαηα ζεσξήζεθε αλαγθαία θαη ε πξνζζήθε επηπιένλ ιεηηνπξγηψλ ζηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα» ψζηε λα γίλεη κηα αθφκε πην ελδηαθέξνπζα θαη ρξήζηκε ηζηνζειίδα αιιά θαη γηα λα κειεηεζνχλ θαη λα εθαξκνζηνχλ δηάθνξεο ηερλνινγίεο αλάπηπμεο δηαδηθηπαθψλ εθαξκνγψλ ψζηε λα απνθνκηζηνχλ πεξηζζφηεξεο γλψζεηο θαη εκπεηξία απφ ηελ δηαηξηβή. Έηζη πξνζηέζεθαλ test αμηνιφγεζεο, δηαδξαζηηθέο γξαθηθέο παξαζηάζεηο θαη κηα κηθξνεθαξκνγή πνπ πξαγκαηνπνηεί βαζηθνχο ππνινγηζκνχο πηλάθσλ. Όιε ε ζειίδα αξρηθά δεκηνπξγήζεθε κε ην ζχζηεκα Joomla. Μέζσ ηνπ Joomla δεκηνπξγήζεθε κηα βαζηθή ζειίδα ε νπνία, κεηά απφ ξπζκίζεηο θαη πξνζζήθε πξσηφηππνπ θψδηθα, δηακνξθψζεθε ζηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Η εγθαηάζηαζε θαη ε ρξήζε ηνπ Joomla δελ είλαη δχζθνιε. Οη γλψζεηο πνπ απαηηνχληαη γηα ηε ρξήζε ηνπ Joomla είλαη νη βαζηθέο γλψζεηο δηαρείξηζεο ελφο πξνγξάκκαηνο θαη θαιφ δηάβαζκα ηνπ manual. Η δεκηνπξγία, ινηπφλ, ηεο αξρηθήο ηζηνζειίδαο ήηαλ ζρεηηθά εχθνιε. Σν Joomla αλέιαβε ηε δεκηνπξγία ησλ βαζηθψλ αξρείσλ θαη ηελ νξγάλσζε απηψλ ζε θαηαιφγνπο. ηε ζπλέρεηα, ζεηξά είρε ε δηακφξθσζε ηεο ηζηνζειίδαο θαη ε πξνζζήθε πεξηερνκέλνπ. Υξεηάζηεθε ρξφλνο θαη πνιινί πεηξακαηηζκνί ψζηε λα θαηαλνεζεί ε θηινζνθία κε ηελ νπνία ιεηηνπξγεί ε ηζηνζειίδα πνπ δεκηνπξγήζεθε κέζσ ηνπ Joomla ψζηε λα εληνπηζηνχλ ηα ζεκεία ηνπ θψδηθα φπνπ ζα γηλφηαλ πξνζζήθεο ή αιιαγέο πξνθεηκέλνπ λα επηηεπρζεί ην επηζπκεηφ απνηέιεζκα. ει. 115 απφ 141

116 χλνςε Σν Joomla δίλεη επηινγέο δηαρείξηζεο κέζα απφ ην menu Administrator, αιιά απηφ δελ είλαη αξθεηφ νχηε αληάμην γηα πηπρηαθή εξγαζία ελφο ηκήκαηνο Μεραληθψλ Πιεξνθνξηθήο. Με ην πξφγξακκα δηαρείξηζεο αξρείσλ FileZilla, θαη ην πξφγξακκα επεμεξγαζίαο πεγαίνπ θψδηθα Crimson Editor έγηλε νπζηαζηηθή δηαρείξηζε ηεο ηζηνζειίδαο. Έλα ζπκπέξαζκα πνπ πξνέθπςε απφ απηή ηε δηαδηθαζία είλαη φηη ζέιεη ρξφλν θαη κειέηε γηα θαηαλνεζεί ζε βάζνο «μέλνο» θψδηθαο. Υξεζηκνπνηήζεθαλ γλσζηέο θαη δηδαρζείζεο ηερλνινγίεο αλάπηπμεο δηαδηθηπαθψλ εθαξκνγψλ ζε ζπλδπαζκφ κε λέεο ηερλνινγίεο. Υξεηάζηεθαλ αξθεηέο ψξεο κειέηεο, πεηξακαηηζκψλ θαη έξεπλαο ζην δηαδίθηπν γηα λα θαηαλνεζνχλ ζε βάζνο φιεο νη ηερλνινγίεο. Σν απνηέιεζκα είλαη νη ππάξρνπζεο γλψζεηο λα εκβαζχλνπλ, λα πξνζηεζνχλ λέεο, λα απνθηεζεί εκπεηξία ζηελ ζπλδπαζκέλε ρξήζε ηερλνινγηψλ θαη λα θαηαλνεζεί ζε κεγάιν βαζκφ ε ιεηηνπξγία ηνπ δηαδηθηχνπ. Έλα ζεκαληηθφ πξφβιεκα πνπ πξνέθπςε είλαη ην βαζηθφηεξν θαη ζπλεζέζηεξν πξφβιεκα πνπ αληηκεησπίδνπλ φινη νη ζρεδηαζηέο δηαδηθηπαθψλ εθαξκνγψλ: ε ηζηνζειίδα δελ παξνπζηάδεηαη ή ιεηηνπξγεί κε ηνλ ίδην ηξφπν ζε φινπο ηνπο web browser (browser compatibility). Πνιιέο θνξέο έλα θνκκάηη θψδηθα, ελψ δνχιεπε αξθεηά θαιά ζην Chrome δελ δνχιεπε ην ίδην ηθαλνπνηεηηθά ή θαη θαζφινπ ζηνλ Internet Explorer ή ζην Mozilla Firefox. ε ηέηνηεο πεξηπηψζεηο έπξεπε λα γξαθηνχλ δχν ή ηξεηο δηαθνξεηηθέο εθδφζεηο ηνπ ίδηνπ θψδηθα θαη ζηε ζπλέρεηα λα πξνζηεζνχλ επηπιένλ έιεγρνη ψζηε λα εθηειείηαη ην αληίζηνηρν θνκκάηη θψδηθα αλάινγα κε ην web browser. Ο βηβιηνζήθεο JQuery, MathJax θαη JSXGraph νη νπνίεο ρξεζηκνπνηήζεθαλ, πέξα απφ ην φηη απνηεινχλ εμαηξεηηθά εξγαιεία ζρεδίαζεο δηθηπαθψλ εθαξκνγψλ, έρνπλ θαη ην πιενλέθηεκα φηη έρνπλ εμ αξρήο ζρεδηαζηεί ψζηε λα ηξέρνπλ ηέιεηα ζε θάζε web browser. Πξνηείλνληαη αλεπηθχιαθηα ζε φπνηνλ ζθνπεχεη λα αλαπηχμεη θάπνηα ηζηνζειίδα, εηδηθά εάλ πξφθεηηαη γηα ηζηνζειίδα ζρεηηθή κε ηα καζεκαηηθά ή ηε θπζηθή. ει. 116 απφ 141

117 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα 7.2 Μειινληηθέο βειηηώζεηο θαη πξνηάζεηο Δίλαη αδχλαην θαλείο λα βάιεη ηειεία ζε έλα έξγν πξνγξακκαηηζκνχ. Οη ηερλνινγίεο αλάπηπμεο ινγηζκηθνχ εμειίζζνληαη κε ηαρχηαηνπο ξπζκνχο, νη αλάγθεο ηεο αγνξάο θαη ησλ ρξεζηψλ αιιάδνπλ ζπλερψο θαη θάζε κέξα ππάξρεη θάηη θαηλνχξην ζηα ηερληθά ραξαθηεξηζηηθά ππνινγηζηψλ, smartphone θηι Παξαθάησ αλαθέξνληαη κεξηθέο κειινληηθέο βειηηψζεηο πνπ ζα κπνξνχζαλ λα γίλνπλ ζηε «Μαζεκαηηθή Γηδαθηηθή Ιζηνζειίδα». Να εκπινπηηζηεί ε ζειίδα κε πεξηζζφηεξα άξζξα θαη λα γίλεηαη κεγαιχηεξε αλάιπζε θάπνησλ καζεκαηηθψλ ελλνηψλ. Να πξνζηεζνχλ πεξηζζφηεξα παξαδείγκαηα θαη αζθήζεηο ζηα άξζξα. Να εκπινπηηζηεί ε βάζε δεδνκέλσλ κε πεξηζζφηεξεο εξσηήζεηο θαη απαληήζεηο γηα ηα test αμηνιφγεζεο. Να ζρεδηαζηνχλ πεξηζζφηεξεο γξαθηθέο παξαζηάζεηο. Να βειηησζεί ν θψδηθαο γηα ηελ κηθξνεθαξκνγή «Πίλαθεο» θαη λα κπνπλ πεξηζζφηεξα θνπκπηά θαη κε άιιεο ιεηηνπξγίεο. Να δεκηνπξγεζεί εηδηθή θαηεγνξία ρξεζηψλ-θαζεγεηψλ, νη νπνίνη ζα έρνπλ εηδηθά δηθαηψκαηα θαη δπλαηφηεηεο ζε ζρέζε κε ηνπο απινχο ρξήζηεο. Να ππάξρεη δηαθνξεηηθφ menu γηα ηελ θαηεγνξία ησλ θαζεγεηψλ. Να κπνξνχλ κέζα απφ ηε ζειίδα λα επεμεξγάδνληαη ηηο εξσηήζεηο θαη απαληήζεηο πνπ είλαη ήδε ζηελ βάζε δεδνκέλσλ. Να κπνξνχλ λα εηζάγνπλ λέεο εξσηήζεηο θαη απαληήζεηο ζηελ βάζε δεδνκέλσλ κέζα απφ ηε ζειίδα. Να κπνξνχλ λα δνπλ ην ηζηνξηθφ ησλ βαζκνινγηψλ φισλ ησλ κειψλ. Να κπνξνχλ λα εηζάγνπλ λέα άξζξα θαη λα κπνξνχλ λα επεμεξγάδνληαη ηα ππάξρνληα κέζα απφ ηε ζειίδα. Να θηηαρηεί έλα πιαίζην εηζαγσγήο θεηκέλνπ, κε εηδηθά θνπκπηά πνπ λα δεκηνπξγνχλ θψδηθα ζε mathjax ψζηε λα κελ είλαη απαξαίηεην νη θαζεγεηέο λα γλσξίδνπλ θψδηθα LaTeX. ει. 117 απφ 141

118 χλνςε Να δεκηνπξγεζνχλ test πνπ λα κελ είλαη απιά πνιιαπιήο επηινγήο, αιιά ν ρξήζηεο λα κπνξεί λα εηζάγεη πην πνιχπινθεο απαληήζεηο, φπσο καζεκαηηθέο ζπλαξηήζεηο ή γξαθηθέο παξαζηάζεηο. Μεηά ηελ νινθιήξσζε ηνπ test, πέξα απφ ηε βαζκνινγία λα εκθαλίδνληαη πνηα ιάζε έθαλε ν ρξήζηεο, πνηα είλαη ε ζσζηή απάληεζε θαη γηα πνην ιφγν. Να δεκηνπξγεζεί αληίζηνηρε έθδνζε ηεο ηζηνζειίδαο γηα smartphone θαη tablet. ει. 118 απφ 141

119 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Κεθάιαην 8o Βηβιηνγξαθία 8.1 Βηβιία Κεληεξιήο, Π (2009). Ανάπηςξη Γιαδικηςακών Δθαπμογών, Αζήλα: Κεληεξιήο. Κφθθηλνο, Ι. (2008). Βάζειρ Γεδομένυν Ι, έξξεο άιηαο, Β. (2009). ηοισεία διδακηικήρ και παιδαγυγικήρ. Θεζζαινλίθε: Δπίθεληξν. άιηαο, Β. (2011). Μαθημαηικά ΙΙ. Θεζζαινλίθε: Δπίθεληξν. Κιεηδάξηζκνο Αζήλα: άιηαο, Β. (2012). Mathematica. Αζήλα: πκκεηξία. άιηαο, Β. (2013). Μαθημαηικά Ι. Υαιθίδα: Κσζηφγηαλνο. άιηαο, Β. (2013). Geogebra. Αζήλα: πκκεηξία Silberschatz, A. Korth H. Sudarshan S. (2002). ςζηήμαηα Βάζευν Γεδομένυν, New York:The McGraw-Hill Companies Inc. ει. 119 απφ 141

120 Βηβιηνγξαθία 8.2 Ιζηνζειίδεο LaTeX/MathJax online επεμεξγαζηήο εμηζψζεσλ LaTeX νδεγφο ρξήζεο ηνπ MathJax θαηάινγνο LaTeX εληνιψλ γηα ην MathJax επίζεκε ηζηνζειίδα ηνπ MathJax κεραλή αλαδήηεζεο LaTeX εληνιψλ εληνιέο LaTeX γλσξηκία κε ην ζχζηεκα LaTeX HTML πίλαθαο φισλ ησλ html element νδεγνί, παξαδείγκαηα επίζεκε ηζηνζειίδα html color codes δηεζλήο θνηλφηεηα πξνγξακκαηηζηψλ Javascript επίζεκε ηζηνζειίδα ηνπ MathJs ει. 120 απφ 141

121 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα νδεγνί, παξαδείγκαηα γηα Javascript JSXGraph Wiki εληνιέο JSXGraph δηεζλήο θνηλφηεηα πξνγξακκαηηζηψλ νδεγνί, παξαδείγκαηα γηα jquery επίζεκε ηζηνζειίδα ηνπ JQuery CSS νδεγνί, παξαδείγκαηα ζεηξά άξζξσλ ζρεηηθά κε ηελ ηδηφηεηα «position» online html, css, javascript editor css tricks νδεγφο βαζηθψλ ιεηηνπξγηψλ ηεο css επίζεκε ηζηνζειίδα ηεο css Joomla επίζεκε ειιεληθή ηζηνζειίδα Joomla tutorial ει. 121 απφ 141

122 Βηβιηνγξαθία Δκθάληζε, ρξώκαηα online εθαξκνγή ειέγρνπ αληίζεζεο κεηαμχ ρξσκάησλ παιέηα θαη θσδηθνί ρξσκάησλ The dos and don ts of dark web design online εθαξκνγή ειέγρνπ αληίζεζεο κεηαμχ ρξσκάησλ γλψζεηο γηα ηα ρξψκαηα βαζηθέο 10 αξρέο γηα ηελ δεκηνπξγία επαλάγλσζησλ θεηκέλσλ έηνηκνη ζπλδπαζκνί ρξσκάησλ ρξψκαηα θαη ςπρνινγία «An Introduction to Color Theory for Web Designers» έηνηκνη ζπλδπαζκνί ρξσκάησλ Λνηπέο ηζηνζειίδεο δσξεάλ εηθφλεο θαη θσηνγξαθίεο πςειήο αλάιπζεο επίζεκε ηζηνζειίδα ηνπ TortoiseSVN ει. 122 απφ 141

123 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα επίζεκε ηζηνζειίδα ηνπ FileZilla utorial/ TortoiseSVN tutorial επίζεκε ηζηνζειίδα ηνπ TortoiseSVN ει. 123 απφ 141

124 Παξαξηήκαηα Κεθάιαην 9o Παξαξηήκαηα 9.1 Οδεγόο εγθαηάζηαζεο ηνπ Joomla Η δηαδηθαζία ηεο εγθαηάζηαζεο ηνπ Joomla είλαη κηα αξθεηά απιή δηαδηθαζία, αξθεί λα γίλεη πξνζεθηηθά. Πξνυπφζεζε γηα λα μεθηλήζεη θαλείο ηνλ νδεγφ εγθαηάζηαζεο ηνπ ζπζηήκαηνο Joomla είλαη λα ππάξρεη ήδε δηαζέζηκνο ελεξγφο ινγαξηαζκφο ζε θάπνην web host. Οη παξαθάησ νδεγίεο θαη εηθφλεο είλαη ελδεηθηηθέο θαη αθνξνχλ ηε πιαηθφξκα δηαρείξηζεο «cpanel», ηελ έθδνζε ηνπ Joomla θαη ην ινγηζκηθφ δηαρείξηζεο αξρείσλ FileZilla. Η εγθαηάζηαζε ηνπ Joomla μεθηλά απφ ηελ επίζεκε ειιεληθή ηζηνζειίδα γηα ην Joomla, ηελ ηζηνζειίδα απηή είλαη δηαζέζηκα δσξεάλ ηα αξρεία εγθαηάζηαζεο ηεο πην πξφζθαηεο έθδνζεο ηνπ Joomla(εηθφλα 9-1). Δηθόλα 9-1 Σν επφκελν βήκα, αθνχ θαηεβνχλ ηα αξρεία εγθαηάζηαζεο ηνπ Joomla, εμαξηάηαη απφ ην αλ ε πιαηθφξκα δηαρείξηζεο ηεο ηζηνζειίδαο δηαζέηεη πξνεγθαηεζηεκέλν δηαρεηξηζηή αλεβάζκαηνο αξρείσλ (file manager) ή εάλ απιά πξνηηκνχκε λα ρξεζηκνπνηήζνπκε έλα αλεμάξηεην file manager, φπσο ην FileZilla. ει. 124 απφ 141

125 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα A. Δάλ ε πιαηθόξκα δηαρείξηζεο δηαζέηεη file manager Αθνχ έρεη θαηεβεί ην αξρείν «Joomla_3.4.1-Stable-Full_Package.zip» ζηνλ ππνινγηζηή καο, πξέπεη λα γίλεη upload ζην server. Απηή ε δηαδηθαζία ζα γίλεη κε ηε βνήζεηα ηνπ file manager, ν νπνίνο βξίζθεηαη ζην menu δηαρείξηζεο ηνπ cpanel. (εηθφλα 9-2). Δηθόλα 9-2 Ο file manager ζα αλνίμεη έλα παξάζπξν (εηθφλα 9-3) ζην νπνίν επηιέγνπκε πνηνλ θαηάινγν αξρείσλ επηζπκνχκε λα δνχκε/επεμεξγαζηνχκε θαη απφ πνηα ηζηνζειίδα. Σα βαζηθά αξρεία κηαο ηζηνζειίδαο βξίζθνληαη ζην θάθειν «Document root» θαη ζε απηφ ην θάθειν ζα γίλεη ην αλέβαζκα ησλ αξρείσλ εγθαηάζηαζεο ηνπ Joomla. ει. 125 απφ 141

126 Παξαξηήκαηα Δηθόλα 9-3 Ο file manager ζα αλνίμεη ηνλ θαηάινγν (εηθφλα 9-4). Δηθόλα 9-4 Με ην θνπκπί «Upload» ζα αλνίμεη κηα λέα ζειίδα (εηθφλα 9-5). ει. 126 απφ 141

127 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 9-5 Με ην θνπκπί «Δπηινγή αξρείνπ», βξίζθνπκε ζηνλ ππνινγηζηή καο ην αξρείν «Joomla_3.4.1-Stable-Full_Package.zip» θαη γίλεηαη ην upload ζην server (εηθφλα 9-6). Δηθόλα 9-6 Αθνχ νινθιεξσζεί ην upload θαη έρεη αλεβεί ην αξρείν zip ηνπ Joomla ζην server, πξέπεη λα γίλεη εμαγσγή ησλ αξρείσλ πνπ πεξηέρεη ζην server. Η δηαδηθαζία ηεο εμαγσγήο ζα γίλεη κε ην θνπκπί «Extract» (εηθφλα 9-7). ει. 127 απφ 141

128 Παξαξηήκαηα Δηθόλα 9-7 Θα αλνίμεη έλα παξάζπξν ζην νπνίν απιά ζα επηιέμνπκε «Extract File(s)» (εηθφλα 9-8). Δηθόλα 9-8 Αθνχ νινθιεξσζεί ε εμαγσγή ησλ αξρείσλ, έρεη νινθιεξσζεί θαη ε εγθαηάζηαζε ηνπ Joomla ζην server. B. Δάλ ν web host δελ δηαζέηεη file manager (ή αλ κηα αλεμάξηεηε εθαξκνγή δηαρείξηζεο αξρείσλ είλαη πξνηηκόηεξε) Δθφζνλ ε πιαηθφξκα δηαρείξηζεο δελ παξέρεη πξνεγθαηεζηεκέλε εθαξκνγή δηαρείξηζεο αξρείσλ, ππάξρνπλ πνιιά πξνγξάκκαηα γηα απηφ ην ζθνπφ θαη ηα ει. 128 απφ 141

129 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα πεξηζζφηεξα απφ απηά είλαη δσξεάλ (FileZilla, FTPUploader, FlashXP θ.α). Γηα ηελ αλάπηπμε ηεο «Μαζεκαηηθήο Γηδαθηηθήο Ιζηνζειίδαο» ρξεζηκνπνηήζεθε ε δσξεάλ εθαξκνγή FileZilla. Όηαλ αλνίγεη ε εθαξκνγή FileZilla αλνίγεη έλα παξάζπξν ζαλ ηεο εηθφλαο 9-9. Δηθόλα 9-9 Απφ ηε γξακκή επηινγψλ, κε ηηο επηινγέο Αξρείν > Γηαρεηξηζηήο Σνπνζεζηψλ αλνίγεη ν «Γηαρεηξηζηήο Σνπνζεζηψλ» (εηθφλα 9-10). ει. 129 απφ 141

130 Παξαξηήκαηα Δηθόλα 9-10 Με ην θνπκπί «Νέα Σνπνζεζία», δεκηνπξγείηαη κηα λέα ηνπνζεζία. Γίλεηαη ην επηζπκεηφ φλνκα ηνπνζεζίαο, ζην πεδίν «Κφκβνο» ζπκπιεξψλεηαη ε δηεχζπλζε ip ηνπ server θαη ζηα πεδία «Υξήζηεο» θαη «Κσδηθφο πξφζβαζεο» ζπκπιεξψλνληαη ηα ζηνηρεία ζχλδεζεο γηα ην web host. Αλ φια ηα ζηνηρεία ζχλδεζεο είλαη ζσζηά, κε ην θνπκπί «χλδεζε» ζα γίλεη ζχλδεζε ζην web host θαη ζα εκθαληζηνχλ ηα αξρεία ηνπ server. Θα πξέπεη λα αλαδεηήζνπκε ην θάθειν «public_html» ή αλ δελ ππάξρεη λα ην δεκηνπξγήζνπκε (εηθφλα 9-11). ει. 130 απφ 141

131 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 9-11 ηε ζπλέρεηα πξέπεη λα γίλεη απνζπκπίεζε ηνπ αξρείνπ «Joomla_3.4.1-Stable- Full_Package.zip» ζε θάπνην ζεκείνπ ηνπ ππνινγηζηή θαη λα κεηαθεξζνχλ φια ηα αξρεία κέζα ζην θάθειν «public_html». ην ζεκείν απηφ έρεη νινθιεξσζεί ε εγθαηάζηαζε ηνπ Joomla ζην server. Από εδώ θαη πέξα ηα βήκαηα είλαη ίδηα γηα όινπο ηνπο web host. Αθνχ έρεη εγθαηαζηαζεί ην Joomla ζην server, ζεηξά έρεη ε δεκηνπξγία ηεο βάζεο δεδνκέλσλ. ηε πιαηθφξκα δηαρείξηζεο ηεο ηζηνζειίδαο ππάξρεη ν «MySQL Database Wizard» (εηθφλα 9-12). ει. 131 απφ 141

132 Παξαξηήκαηα Δηθόλα 9-12 Ο «MySQL Database Wizard» μεθηλά ηε δεκηνπξγία ηεο βάζεο δεδνκέλσλ. Πξψηα εηζάγεηαη ην επηζπκεηφ φλνκα γηα ηε βάζε δεδνκέλσλ (εηθφλα 9-13). Δηθόλα 9-13 ηε ζπλέρεηα, δεκηνπξγείηαη ν πξψηνο ρξήζηεο ηεο βάζεο, κε username θαη password (εηθφλα 9-14). ει. 132 απφ 141

133 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα Δηθόλα 9-14 Η βάζε έρεη δεκηνπξγεζεί. Αλ αλνίμνπκε ηελ ηζηνζειίδα καο θαη φια πήγαλ θαιά, ζα εκθαληζηεί κηα ζειίδα παξφκνηα κε απηήλ ηεο εηθφλαο 9-15, φπνπ μεθηλά ε παξακεηξνπνίεζε ηεο ηζηνζειίδαο. ει. 133 απφ 141

134 Παξαξηήκαηα Δηθόλα 9-15 ην αξηζηεξά κέξνο ηεο ζειίδαο, ζπκπιεξψλεηαη ην φλνκα ηεο ηζηνζειίδαο θαη κηα ζχληνκε πεξηγξαθή γηα ηε ζειίδα απηή. Απηή ε πεξηγξαθή είλαη ην θείκελν πνπ ζα εκθαλίδεηαη θάησ απφ ην link ηεο ζειίδαο καο ζηηο κεραλέο αλαδήηεζεο. Η πεξηγξαθή ηεο ηζηνζειίδαο κπνξεί λα αιιάμεη θαη απφ ην menu δηαρείξηζεο ηνπ Joomla. Κάησ θαη αξηζηεξά ππάξρεη ν δηαθφπηεο ιεηηνπξγίαο ηεο ηζηνζειίδαο, φπνπ επηιέγνπκε εάλ ε ηζηνζειίδα ζα είλαη δηαζέζηκε ζην θνηλφ ή φρη. Η επηινγή απηή είλαη ρξήζηκε θαηά ηηο πεξηφδνπο φπνπ ε ηζηνζειίδα καο δελ είλαη νινθιεξσκέλε αθφκα ή γίλνληαη θάπνηεο εξγαζίεο αλαβάζκηζεο ή ζπληήξεζεο. ει. 134 απφ 141

135 Πηπρηαθή εξγαζία ησλ: Μπαηαξιήο Γεκήηξεο, Κνπθάθε Ισάλλα ην δεμί κέξνο ηεο ζειίδαο, ππάξρεη κηα θφξκα δεκηνπξγίαο ελφο εηδηθνχ ρξήζηεδηαρεηξηζηή ηεο ηζηνζειίδαο. Δηζάγνπκε δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ, username θαη password. ηελ επφκελε ζειίδα, ππάξρνπλ κεξηθέο ξπζκίζεηο ζρεηηθά κε ηε βάζε δεδνκέλσλ (εηθφλα 9-16). Σα πεδία πνπ πξέπεη λα ζπκπιεξψζνπκε είλαη: ην φλνκα ρξήζηε, ηνλ θσδηθφ πξφζβαζεο θαη ην φλνκα ηεο βάζεο δεδνκέλσλ, ελψ ηα ππφινηπα πεδία κέλνπλ σο έρνπλ. Δηθόλα 9-16 ει. 135 απφ 141

136 Παξαξηήκαηα ηελ επφκελε ζειίδα (εηθφλα 9-17) επηιέγεηαη «Πξνεπηιεγκέλν Δλδεηθηηθφ πεξηερφκελν ζηα αγγιηθά (GB)». Απηή ε επηινγή δελ είλαη κφληκε θαζψο κεηά ην ηέινο ηεο εγθαηάζηαζεο δχλαηαη λα εγθαηαζηαζεί κηα άιιε γιψζζα. Δηθόλα 9-17 Η εγθαηάζηαζε μεθηλά κε ην θνπκπί «Δγθαηάζηαζε» θαη πξαγκαηνπνηείηαη ζε ειάρηζην ρξνληθφ δηάζηεκα. Αθνχ νινθιεξσζεί ε εγθαηάζηαζε ζα εκθαληζηεί ην κήλπκα ηεο εηθφλαο Δίλαη ζεκαληηθφ λα δηαγξαθεί ν θάθεινο installation γηα ιφγνπο αζθαιείαο. Αλ ν θάθεινο απηφο παξακείλεη ζην server ππάξρεη ν θίλδπλνο θάπνηνο ηξίηνο λα μαλαηξέμεη ηελ εγθαηάζηαζε θαη λα πάξεη ηνλ έιεγρν ηεο ηζηνζειίδαο. Δηθόλα 9-18 ει. 136 απφ 141