Δείτε στο https://self-testing.gov.gr/ οδηγίες σχετικά με τη διαδικασία που πρέπει να ακολουθηθεί για τη χρήση των self test για τον Κορονοϊό
Παρασκευή 9 Απριλίου 2021
Τετάρτη 7 Απριλίου 2021
Netiquette και χρήση του email
Ας δούμε μερικούς κανόνες ορθής χρήσης του email, γνωστό κι ως Etiquette, πατώντας εδώ.
Πέμπτη 1 Απριλίου 2021
Κυριακή 7 Φεβρουαρίου 2021
Τηλεκπαίδευση
Δείτε εδώ οδηγίες σχετικά με την τηλεκπαίδευση, όπως δημοσιεύτηκαν στο esos.gr
Το ωράριο του ΓΕΛ Ατσιποπούλου είναι
ΑΠΟ 8/2/2021
Σάββατο 6 Φεβρουαρίου 2021
Ενημέρωση για τη λειτουργία των σχολικών μονάδων και λοιπών εκπαιδευτικών δομών ανά Δημοτική ή Περιφερειακή Ενότητα
Σελίδα ενημέρωσης από του Υπουργείο Παιδείας & Θρησκευμάτων
Πατήστε εδώ
Πέμπτη 4 Φεβρουαρίου 2021
Alice 3 - Σκοποί και στόχοι της Ενότητας
Σκοποί και στόχοι της διδακτικής ενότητας:
Σκοπός είναι οι μαθητές να έρθουν σε επαφή με το περιβάλλον του Alice και να δημιουργήσουν τα
πρώτα δικά τους απλά σενάρια, ώστε να κατανοήσουν τις βασικές έννοιες του αντικειμενοστραφούς
προγραμματισμού.
Οι Στόχοι της ενότητας είναι:
Γνωστικοί
❏ να αναγνωρίζουν οι μαθητές τις κλάσεις και τα αντικείμενα
❏ να προσδιορίζουν τι κληρονομείται από τις κλάσεις στα αντικείμενα
❏ να περιγράφουν τις έννοιες αλγορίθμου και προγράμματος (ανάκληση πρότερων γνώσεων)
❏ να περιγράφουν τη διαφορά μεταξύ καθορισμένης (ακριβούς) τοποθέτησης και της “σύρε και άφησε -
drag and drop” τοποθέτησης (μη ακριβους)
❏ να περιγράφουν ένα προγραμματιστικό περιβάλλον
❏ να αναγνωρίζουν τα αντικείμενα μιας σκηνής
❏ να διατυπώνουν με σαφήνεια τη διάκριση μεταξύ του συντάκτη κώδικα και του “setup scene”
❏ να αναγνωρίζουν τις ιδιότητες των αντικειμένων και να τις παραμετροποιούν
Δεξιότητες
❏ να δημιουργούν και να αποθηκεύουν ένα πρότζεκτ
❏ να ανοίγουν ένα έτοιμο πρότζεκτ
❏ να κατασκευάζουν συνδυασμούς εντολών σε σενάρια
❏ να προσθέτουν αντικείμενα στη σκηνή
❏ να δημιουργούν ένα απλό σενάριο χρησιμοποιώντας απλές εντολές (μετακίνησης, εισαγωγή/αφαίρεση
εντολής από σενάριο)
❏ να χρησιμοποιούν απλά εργαλεία του περιβάλλοντος όπως η αντιγραφή και η αναίρεση
❏ να δημιουργούν διαδικασίες για την μετακίνηση αντικειμένων
Στάσεις
❏ να δουλεύουν ομαδικά και να αποκτούν ρόλους
❏ να θεωρήσουν τον προγραμματισμό παιχνίδι
❏ να εξάψουν τη φαντασία τους και τη δημιουργικότητα τους
❏ να αποκτήσουν θετική εμπειρία για τον προγραμματισμό και τα προγραμματιστικά περιβάλλοντα
Σάββατο 30 Ιανουαρίου 2021
Μορφοποίηση ιστοσελίδων - CSS
Στο παρόν μάθημα ασχολούμαστε με τη λογική της χρήσης της μορφοποίησης του κειμένου μέσω χρωμάτων και της χρήσης κοινών προτύποων για την εμφάνιση των ιστοσελίδων σε ένα διαδικτιακό τόπο (web site)
Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11
Πολύτιμο εργαλείο μας είναι το site https://www.w3schools.com/
Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.
Η CSS, αρχικά των λέξεων Cascading Style Sheets (αλληλουχίες φύλλων στυλ), είναι μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML.
Η σημασία του όρου "Cascading" ( "αλληλουχίες" ) έχει την έννοια ότι ένα "στυλ" που εφαρμόζεται σε ένα αντικείμενο, εφαρμόζεται αυτόματα και για όλα τα "παιδιά" του. Για παράδειγμα αν στο στοιχείο "body" μια HTML σελίδας (θυμηθείτε ότι όπως είδαμε σε προηγούμενο μάθημα αναφέρεται στο σύνολο του περιεχομένου της ιστοσελίδας) ορίσουμε ότι χρώμα του κειμένου είναι Μπλε, αυτό το χαρακτηριστικό θα "κληρονομηθεί" σε όλα τα στοιχεία που βρίσκονται μέσα σε αυτό στοιχείο (εκτός αν για κάποιο από αυτά ορίσουμε ένα άλλο χρώμα).
Οι κανόνες αυτοί είναι ανεξάρτητοι από το ίδιο το έγγραφο HTML. Επιτρέπουν στον συντάκτη να εστιάσει στη δομή και το περιεχόμενο του εγγράφου με τη γλώσσα HTML και να καθορίσει αυτόνομα και ανεξάρτητα τη διάταξη και την εμφάνισή του. Ο διαχωρισμός αυτός επιτρέπει την προσαρμογή της διάταξης και της εμφάνισης ενός εγγράφου HTML ανεξάρτητα από το ίδιο το έγγραφο HTML, και επιτυγχάνεται συνήθως με την καταγραφή των κανόνων σε ξεχωριστά αρχεία.
Η χρήση ενός συνόλου κανόνων CSS γίνεται συνήθως με σύνδεση του αντίστοιχου αρχείου με επέκταση .css μέσα στο έγγραφο HTML με έναν από τους παρακάτω τρόπους:
- με την παρακάτω ετικέτα link, μέσα στην ετικέτα head (προτεινόμενος τρόπος)
<link rel="stylesheet" media="screen" href="to-styl-mou.css"> - με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style
<style> h1 { color: red; } </style>
Χαρακτηριστικοί κανόνες μορφοποίησης
Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες { και }) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».
P { color: green; border-bottom: 1px solid black; padding: 10px; }
Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της παραγράφου.
Οι «επιλογείς» είναι ονόματα ετικετών της γλώσσας HTML (όπως P, H1, div) αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης. Αρκεί να γνωρίζουμε ότι οι κλάσεις (ιδιότητα class την ετικετών) ομαδοποιούν κάποια στοιχεία, ενώ οι κωδικοί αναγνώρισης (ιδιότητα id των ετικετών) χρησιμοποιούνται για τον μοναδικό προσδιορισμό κάποιων στοιχείων. Για παράδειγμα:
P#title { color: red; font-size: 20px; }
Πέρα από τους κανόνες για τις παραγράφους, ειδικά για την παράγραφο με κωδικό αναγνώρισης title, το χρώμα γραμμάτων θα είναι κόκκινο και το μέγεθος 20pixel.
P.orismos { padding-left: 20px; border-left: 2px; }
Εκτός από τους κανόνες για τις παραγράφους, για όλες τις παραγράφους με κλάση orismos θα υπάρχει περιθώριο αριστερά 20pixel και περίγραμμα αριστερά 2pixel.
Περισσότερα στοιχεία για τη CSS μπορουν να βρεθούν στο https://www.w3schools.com/html/html_css.asp
ΔΡΑΣΤΗΡΙΟΤΗΤΑ
Στο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal δοκιμάστε να δημιουργήσετε μια μορφοποίηση της ιστοσελίδας ώστε να έχει ένα ελαφρύ κίτρινο (LightYellow) background, οι παράγραφοι να έχουν Μπλε χρώμα (blue), οι επικεφαλίδες Η1 πράσινο χρώμα (green) και οι επικεφαλίδες Η2 μωβ χρώμα (magenta).
Στη συνέχεια βάλτε κάποιο μικρό περιεχόμενο σε κάθε είδος ετικέτας (μια ή δύο γραμμές είναι αρκετές).
Αν το επιθυμείτε, μπορείτε να κάνετε άλλους συνδυασμούς χρωμάτων ή μορφοποιήσεων
Μια πλήρη περιγραφή των διαθέσιμων χρωμάτων μπορεί να βρεθεί στο https://www.w3schools.com/html/html_colors.asp
Παρασκευή 22 Ιανουαρίου 2021
HTML5 και χρήση Video
Μετά τα δύο πρώτα εισαγωγικά μαθήματα στην HTML, συνεχίζουμε με τη γνωριμία με την πιο πρόσφατη έκδοση της γλώσσας, την HTML5.
Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11
Πολύτιμο εργαλείο μας είναι το site https://www.w3schools.com/
Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.
Η HTML5 είναι η τελευταία εξέλιξη της γλώσσας HTML η οποία χρησιμοποιείται εκτενώς και στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές. Η HTML5 προσθέτει νέα χαρακτηριστικά δομής και σύνταξης, δίνοντας ιδιαίτερο βάρος στη σημασιολογία των ετικετών, καθώς και νέες δυνατότητες που περιορίζουν την ανάγκη χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης. Ξεχωρίζουν μεταξύ άλλων:
- νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου, όπως οι header, section, article και nav.
- νέες ετικέτες για εισαγωγή ήχου και βίντεο, τις audio και video αντίστοιχα.
- νέες δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης (offline web applications).
- εμπλουτισμένα στοιχεία για φόρμες (όπως ημερομηνίες, ηλεκτρονικές διευθύνσεις, εύρος τιμών) και πινακοποιημένα δεδομένα καθώς και ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG.
Ας ασχοληθούμε με την εισαγωγή ενός βίντεο σε μια ιστοσελίδα. Η HTML5 επιτρέπει την απευθείας χρήση video στις μορφές .mp4 (αλλά και .ogg και πρόσφατα .webm)
Η ετικέτα video περιλαμβάνει ιδιότητες που καθορίζουν στοιχεία όπως το μέγεθος του βίντεο, το αν θα παρέχονται πλήκτρα ελέγχου όπως έλεγχος έντασης ήχου και διακοπής της αναπαραγωγής.
<video
source src=https://file-examples-com.
width="480" height="270" controls> </
Παρατηρήστε στο παράδειγμα:
- την ιδιότητα src που περιέχει τη διεύθυνση του αρχείου βίντεο
- (στο παράδειγμά μας είναι https://file-examples-
com.github.io/uploads/2017/04/ file_example_MP4_480_1_5MG.mp4 ) - τις ιδιότητες width και height για τον ορισμό των διαστάσεων (480 πλάτος και 270 ύψος στο παράδειγμά μας)
- την ιδιότητα controls για την εμφάνιση των στοιχείων ελέγχου (δηλαδή να αρχίζει να παίζει, να σταματά κλπ)
- το κλείσιμο της ετικέτας video με </video>
ΠΡΟΣΟΧΗ το βιβλίο μας έχει ένα ΤΥΠΟΓΡΑΦΙΚΟ ΛΑΘΟΣ και στο παράδειγμα που έχει, έχουν παραλείψει το <source> tag, η σωστή σύνταξη φαίνεται στο επόμενο παράδειγμα που έχει για την ενσωμάτωση του ήχου
<audio controls>
<source src="ixos.mp3" type="audio/mpeg" />
<source src="ixos.mp3" type="audio/mpeg" />
</audio>
| Περισσότερα για τη χρήση βίντεο μπορούν να βρεθούν στο https://www.w3schools.com/ | |
Για να χρησιμοποιήσουμε ένα τέτοιο βίντεο στην ιστοσελίδα μας (σεβόμενοι πάντα τυχόν πνευματικά δικαιώματα!!!) κάνουμε τη διαδικασία της ενσωμάτωσης του βίντεο
Ας δοκιμάσουμε να ενσωματώσουμε μια θεατρική παράσταση (Ο ΕΧΘΡΟΣ ΤΟΥ ΛΑΟΥ - ΕΡΡΙΚΟΣ ΙΨΕΝ) (εσείς μπορείτε να βρείτε κι οποιοδήποτε άλλο βίντεο...)
Για να το κάνουμε αυτό ακολουθούμε τα παρακάτω βήματα
1) Πάμε στο youtube και αναζητούμε το βίντεο που θέλουμε (στο παράδειγμα γράφουμε " ο εχθρος του λαου ". Πατάμε στο πρώτο βίντεο που βγάζει
2) Πατάμε το κουμπί Share
3) Εμφανίζεται ένα μικρό παράθυρο κι επιλέγουμε το "Embed" (δηλαδή ενσωμάτωση)
4) Στο παράθυρο που εμφανίζεται πατάμε το κουμπί copy (αντιγραφή)
5) Πάμε στην ιστοσελίδα μας και κάνουμε επικόλληση
(Για το συγκεκριμένο παράδειγμα μπορείτε να βάλετε κατευθείαν το ακόλουθο)
<iframe width="560" height="315"
src="https://www.youtube.com/
</iframe>
ΔΡΑΣΤΗΡΙΟΤΗΤΑ
Στο https://www.w3schools.com/
Επειδή στην παρούσα φάση είναι ίσως κάπως δύσκολο να βρεθεί βίντεο mp4 μπορείτε να χρησιμοποιήσετε ως πηγή το https://file-examples-com.
Σάββατο 16 Ιανουαρίου 2021
Εισαγωγή στην HTML
Συνεχίζουμε τη γνωριμία μας με το στυλοβάτη του Παγκοσμίου Ιστού, την HTML.
Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11
Πολύτιμο εργαλείο μας είναι το site https://www.w3schools.com/
Συμπληρωματικό υλικό μπορούμε να βρούμε στο http://aesop.iep.edu.gr/node/7259/1894
Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται πατώντας εδώ
Όπως αναφέρει και το βιβλίο μας μερικές βασικές "ετικέτες" (tags) φαίνονται ακολούθως
| <HTML>...<⁄HTML> | Ορίζει την αρχή και το τέλος μιας ιστοσελίδας. |
| <HEAD>...<⁄HEAD> | Ορίζει το τμήμα εκείνο της ιστοσελίδας στο οποίο αναφέρονται διαχειριστικής φύσεως πληροφορίες που αφορούν στο περιεχόμενο της ιστοσελίδας. Οι πληροφορίες αυτές δεν εμφανίζονται από τον φυλλομετρητή. |
| <BODY>...<⁄BODY> | Ορίζει το περιεχόμενο της ιστοσελίδας. |
| <TITLE>...<⁄TITLE> | Ορίζει τον τίτλο της. |
| <P>...<⁄P> | Ορίζει παράγραφο. |
| <BR> | Δηλώνει αλλαγή γραμμής. |
| <IMG> | Ορίζει την εισαγωγή κάποιας εικόνας -image- και των παραμέτρων που αφορούν στη θέση της, το μέγεθός της, κ.ά. |
| <A HREF="URL" >...<⁄A> | Ορίζει δεσμό με ιστοσελίδα που βρίσκεται στο URL. |
Για να γίνει περισσότερο κατανοητό, μπορούμε να το φανταστούμε όπως φαίνεται στην επόμενη εικόνα
Μια πολύ καλή πηγή για τις διαθέσιμες ετικέτες της HTML μπορεί να βρεθεί στο https://www.wlearn.gr/etiketes/
1) Χρησιμοποιώντας το https://www.w3schools.com/
δοκιμάζουμε να τροποποιήσουμε το παράδειγμα που βγάζει ωστε δούμε πως δουλεύουν τα "Headers" (H1 Μέχρι Η6). Μπορεί να χρησιμοποιηθεί το παράδειγμα του βιβλίου μας (ή ακόμα καλύτερα μια δική σας εκδοχή 
)
) <Η1>Γαλαξίας</Η1>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>
Στο σημείο αυτό πρέπει να τονίσουμε ότι τα H1-H6 δεν λειτουργούν μόνο σε "διακοσμητικό" επίπεδο (δηλαδή μικρά ή μεγάλα γράμματα), αλλά σε εννοιολογικό. Στο παράδειγμα του βιβλίου ο "Γαλαξίας" περιέχει πχ τη "Γη" ή οποία περιέχει την "Ευρώπη" κ.ο.κ
Άρα το H1 προορίζεται για το "πιο γενικό" και το H6 για το "πιο ειδικό". Με βάση αυτές τις παρατηρήσεις προσπαθήστε να κάνετε τη δική σας ιεραρχία.
Η ιεραρχία επίσης δεν περιορίζεται σε ένα στοιχείο μόνο. Για παράδειγμα εκτός από τη Γη στο ίδιο επίπεδο ιεραρχίας τι άλλο θα ταίριαζε? (Προσπαθήστε να σκεφτείτε κάποιους από τους υπόλοιπους πλανήτες του Ηλιακού μας συστήματος)
Στη συνέχεια θα δούμε πως μπορούμε να χρησιμοποιήσουμε την έννοια της παραγράφου.
Η παράγραφος ορίζεται με τη βοήθεια της ετικέτας <p>
Ορισμός και χρήση: Η ετικέτα <p> ομαδοποιεί το κείμενο που βρίσκεται μέσα στις ετικέτες αρχής και τέλους σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετά το τέλος αυτής.
Ετικέτα τέλους: </p>
Ας δοκιμάσουμε να προσθέσουμε αυτές τις παραγράφους κάτω από την ενότητα "Γη"
<p>Η Γη είναι ο Πλανήτης μας</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>
Παρατηρούμε ότι το κείμενο αλλάζει γραμμή αυτόματα, αλλά επίσης υπάρχει και μια εννοιολογική ομαδοποίηση.
Αυτό θα είναι η εργασία σας για το επόμενο μάθημα.
ΟΛΑ ΑΥΤΑ ΜΠΟΡΟΥΝ ΝΑ ΓΙΝΟΥΝ ΚΑΙ ΑΠΟ ΚΙΝΗΤΟ / TABLET !!!
Παρασκευή 8 Ιανουαρίου 2021
Μείωση της εξεταστέας ύλης των Πανελλαδικώς εξεταζόμενων μαθημάτων 2021
Δείτε εδώ την ανακοίνωση του Υπουργείου
Εγγραφή σε:
Αναρτήσεις (Atom)