HTML5 και χρήση Video

Μετά τα δύο πρώτα εισαγωγικά μαθήματα στην HTML, συνεχίζουμε με τη γνωριμία με την πιο πρόσφατη έκδοση της γλώσσας, την HTML5.

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται στο https://mourikisper.blogspot.com/2020/04/online-editor-html.html 

Η 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.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4

 width="480" height="270"  controls> </video>

Παρατηρήστε στο παράδειγμα:

• την ιδιότητα 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" />

</audio>  

Περισσότερα για τη χρήση βίντεο μπορούν να βρεθούν στο https://www.w3schools.com/html/html5_video.asp

Πολύ συχνά ωστόσο τα βίντεο που θέλουμε να χρησιμοποιήσουμε μπορεί να βρίσκονται στο YouTube  ή σε κάποια ανάλογη υπηρεσία, όπως πχ το Vimeo

Για να χρησιμοποιήσουμε ένα τέτοιο βίντεο στην ιστοσελίδα μας (σεβόμενοι πάντα τυχόν πνευματικά δικαιώματα!!!) κάνουμε τη διαδικασία της ενσωμάτωσης του βίντεο

Ας δοκιμάσουμε να ενσωματώσουμε μια θεατρική παράσταση (Ο ΕΧΘΡΟΣ ΤΟΥ ΛΑΟΥ - ΕΡΡΙΚΟΣ ΙΨΕΝ) (εσείς μπορείτε να βρείτε κι οποιοδήποτε άλλο βίντεο...)

Για να το κάνουμε αυτό ακολουθούμε τα παρακάτω βήματα

1) Πάμε στο youtube και αναζητούμε το βίντεο που θέλουμε (στο παράδειγμα γράφουμε  " ο εχθρος του λαου ". Πατάμε στο πρώτο βίντεο που βγάζει

2) Πατάμε το κουμπί Share  

3) Εμφανίζεται ένα μικρό παράθυρο κι επιλέγουμε το "Embed" (δηλαδή ενσωμάτωση)

4) Στο παράθυρο που εμφανίζεται πατάμε το κουμπί copy (αντιγραφή) 

5) Πάμε στην ιστοσελίδα μας και κάνουμε επικόλληση 

(Για το συγκεκριμένο παράδειγμα μπορείτε να βάλετε κατευθείαν το ακόλουθο)

<iframe width="560" height="315" 

   src="https://www.youtube.com/embed/HUgZyQIxFAw" frameborder="0"  allowfullscreen> 

</iframe>

ΔΡΑΣΤΗΡΙΟΤΗΤΑ

Στο https://www.w3schools.com/html/    δοκιμάστε να κάνετε την εισαγωγή ενός βίντεο mp4 και την εισαγωγή ενός βίντεο από το YouTube. Στη συνέχεια, οπως και στις ασκήσεις   των προηγούμενων 2 εβδομάδων στείλτε μέσω email τη σελίδα που δημιουργήσατε. 

Επειδή στην παρούσα φάση είναι ίσως κάπως δύσκολο να βρεθεί βίντεο mp4 μπορείτε να χρησιμοποιήσετε ως πηγή το https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4

Εισαγωγή στην HTML

 

Συνεχίζουμε τη γνωριμία μας με το στυλοβάτη του Παγκοσμίου Ιστού, την HTML.

Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11

( http://ebooks.edu.gr/ebooks/v/html/8547/2714/Pliroforiki_A-Lykeiou_html-empl/index3_11.html )

Πολύτιμο εργαλείο μας είναι το site  https://www.w3schools.com/html/  

Συμπληρωματικό υλικό μπορούμε να βρούμε στο 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/html/   

δοκιμάζουμε να τροποποιήσουμε το παράδειγμα που βγάζει ωστε δούμε πως δουλεύουν τα "Headers" (H1 Μέχρι Η6). Μπορεί να χρησιμοποιηθεί το παράδειγμα του βιβλίου μας (ή ακόμα καλύτερα μια δική σας εκδοχή ) 

<Η1>Γαλαξίας</Η1>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>  

Στο σημείο αυτό πρέπει να τονίσουμε ότι τα H1-H6 δεν λειτουργούν μόνο σε "διακοσμητικό" επίπεδο (δηλαδή μικρά ή μεγάλα γράμματα), αλλά σε εννοιολογικό. Στο παράδειγμα του βιβλίου ο "Γαλαξίας" περιέχει πχ τη "Γη" ή οποία περιέχει την "Ευρώπη" κ.ο.κ

Άρα το H1 προορίζεται για το "πιο γενικό" και το H6 για το "πιο ειδικό". Με βάση αυτές τις παρατηρήσεις προσπαθήστε να κάνετε τη δική σας ιεραρχία.

Η ιεραρχία επίσης δεν περιορίζεται σε ένα στοιχείο μόνο. Για παράδειγμα εκτός από τη Γη στο ίδιο επίπεδο ιεραρχίας τι άλλο θα ταίριαζε? (Προσπαθήστε να σκεφτείτε κάποιους από τους υπόλοιπους πλανήτες του Ηλιακού μας συστήματος)

Στη συνέχεια θα δούμε πως μπορούμε να χρησιμοποιήσουμε την έννοια της παραγράφου.

Η παράγραφος ορίζεται με τη βοήθεια της  ετικέτας <p>

Ορισμός και χρήση: Η ετικέτα <p> ομαδοποιεί το κείμενο που βρίσκεται μέσα στις ετικέτες αρχής και τέλους σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετά το τέλος αυτής. 

Ετικέτα τέλους: </p>

Ας δοκιμάσουμε να προσθέσουμε αυτές τις παραγράφους κάτω από την ενότητα "Γη"

<p>Η Γη είναι ο Πλανήτης μας</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>

Παρατηρούμε ότι το κείμενο αλλάζει γραμμή αυτόματα, αλλά επίσης υπάρχει και μια εννοιολογική ομαδοποίηση.

Αυτό θα είναι η εργασία σας για το επόμενο μάθημα.

ΟΛΑ ΑΥΤΑ ΜΠΟΡΟΥΝ ΝΑ ΓΙΝΟΥΝ ΚΑΙ ΑΠΟ ΚΙΝΗΤΟ / TABLET !!!

Μείωση της εξεταστέας ύλης των Πανελλαδικώς εξεταζόμενων μαθημάτων 2021

 Δείτε εδώ την ανακοίνωση του Υπουργείου

Η Υπουργική απόφαση για ΓΕ.Λ σε μορφή pdf.

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

Το ερωτηματολόγιο αυτό είναι ΑΝΩΝΥΜΟ και έχει στόχο τη βελτίωση της παρεχόμενης Τηλεκπαίδευσης από το ΓΕΛ Ατσιποπούλου, μέσω της φόρμας που θα βρείτε πατώντας στο σύνδεσμο https://forms.gle/iK55TKjKP4KkCNmQ8

Άνθρωποι και Ηλεκτρονικοί Υπολογιστές

Ο κορυφαίος παγκοσμίως Έλληνας επιστήμονας της Πληροφορικής, και καθηγητής του Πανεπιστημίου της Λωζάνης, μίλησε για τη σχέση ανθρώπων και υπολογιστών.

Ο Ιωσήφ Σηφάκης, βραβευμένος με το περίφημο Turing Award, καθηγητής στην Εcole Polytechnique Federale της Λωζάνης, διευθυντής του Centre de Recherche Integrative της Γκρενόμπλ, αλλά και πρόεδρος του Εθνικού Συμβουλίου Ερευνας και Τεχνολογίας, μίλησε σε καθηγητές και φοιτητές για τον αιώνιο αγώνα εξυπνάδας μεταξύ υπολογιστών και ανθρώπων. 

(Σημείωση του Διαχειριστή: Διατηρώντας ίσως κάποιες επιφυλάξεις ως προς την ακρίβεια της δημοσιογραφικής απόδοσης των δηλώσεων, μεταφέρουμε το άρθρο)

Τα 10 πιο σημαντικά πράγματα που είπε:

1.Στην πληροφορική δεν υπάρχει θεωρία ασφαλείας

 «Υπάρχει μία μεγάλη διαφορά μεταξύ των πληροφορικών συστημάτων και των άλλων τεχνουργημάτων, τα οποία φτιάχνει ο άνθρωπος. Όταν φτιάχνει κανείς ένα σπίτι υπάρχει θεωρία – αυτό του το δίνει η Φυσική, που είναι μία ώριμη Επιστήμη- για να φτιάξει ένα σπίτι, το οποίο δεν θα καταρρεύσει με πάρα πολύ μεγάλη πιθανότητα. Δεν έχουμε ακόμη τέτοιες θεωρίες για τα πληροφορικά συστήματα».

 2.Το αλάνθαστο είναι ανέφικτο προς το παρόν

«Όταν κατασκευάζουμε ένα σύστημα σε αεροπλάνο η πιθανότητα να συμβεί λάθος είναι πάρα πάρα πολύ μικρή, αλλά αυτό στοιχίζει πάρα πολλά χρήματα και είναι ένα σχετικά μικρό σύστημα. Στα τηλεπικοινωνιακά συστήματα μίας χώρας, που είναι τεράστια δεν μπορούμε να εγγυηθούμε, για το ίντερνετ ότι είναι ασφαλές, γιατί όταν το φτιάξαμε και δεν είχαμε τη θεωρία… Ούτε τώρα την έχουμε».

 

Φίλιοι αριθμοί και έτερος εγώ

1) Επισκεφτείτε τη διεύθυνση http://mathhmagic.blogspot.com/2017/01/blog-post.html και μελετήστε το άρθρο ( Η σκηνή από την ταινία που μας ενδιαφέρει βρίσκεται εδώ https://youtu.be/y3zho2aV2bs?t=3180 

Σε αυτό γίνεται αναφορά στους "Φίλιους Αριθμούς", οι οποίοι παίζουν βασικό ρόλο στην ταινία "Έτερος Εγώ".Ένα αστυνομικό θρίλερ,   με πυκνό μυστήριο,  αινιγματική ατμόσφαιρα,  συναρπαστικούς γρίφους,  μαθηματικές αναφορές. Ο σκηνοθέτης και σεναριογράφος Σωτήρης Τσαφούλιας άντλησε την έμπνευση του από μια ιδιοφυή θεωρία του Πυθαγόρα που μέσω των «φίλιων αριθμών»,  συνδυάζει τα μαθηματικά με τον ορισμό της φιλίας. «Ως έτερος εγώ o Πυθαγόρας ορίζει τον φίλο, όχι το άλλο μισό, αλλά τον άλλο εαυτό».

Αν θέλετε μπορείτε να δείτε και την ταινία...

 (όλη η ταινία στο σύνδεσμο  https://www.youtube.com/watch?v=y3zho2aV2bs από τον δημιουργό της) 

2) Χρησιμοποιώντας τη ΓΛΩΣΣΑ ζητείται να γραφεί πρόγραμμα το οποίο να υπολογίζει όλους του "Φίλιους Αριθμούς"  από το 1 μέχρι το 1300

(ΓΛΩΣΣΑ https://alkisg.mysch.gr/downloads/ )

 Υποδείξεις: 

• Για τα ζευγάρια των αριθμών πρέπει να βρούμε τους διαιρέτες τους (MOD & DIV λοιπόν..)
• Μελετώντας το άρθρο κάτι πρέπει να γίνεται με τους διαιρέτες (μιλάμε για άθροισμα, άρα...)
• Πρέπει να εξετάσουμε πολλά ζευγάρια αριθμών άρα θα κάνουμε πολλές...

Ένα νέο είδος επίθεσης

 Τις τελευταίες μέρες ένα νέο είδος επιθέσεων συμβαίνει. Σε χρήστες του gmail έρχονται μηνύματα όπως το εικονιζόμενο.  Στόχος της επίθεσης είναι να πατηθεί ο σύνδεσμος. 

 

Διαγράμματα Ροής

  Ένας από τους τρόπους αναπαράστασης ενός Αλγορίθμου είναι η χρήση των Διαγραμμάτων Ροής

Δείτε εδώ λυμένα παραδείγματα μετατροπής απο ΓΛΩΣΣΑ σε διαγράμματα ροής

Ενημερωτικό υλικό σχετικά με την ασφαλή πλοήγηση στο διαδίκτυο

 

Ενημερωτικό υλικό σχετικά με την ασφαλή πλοήγηση στο διαδίκτυο

• Η εγκύκλιος του Υπουργείου [Υπουργείο Παιδείας, 01/04/2020]
• Ενημέρωση για Εκπαίδευση εξ αποστάσεως [Cyber Crime Division]
• Ενημέρωση για Ασφαλή εξ αποστάσεως εργασία [Cyber Crime Division]
• Συμβουλές χρήσης του διαδικτύου [Cyber Crime Division]
• Συμβουλές για γονείς [Cyber Crime Division]

Πηγή

Συγκεντρωμένο υλικό για τη Θεωρία της Πληροφορικής Γ ΓΕΛ (ΑΕΠΠ)

 Δείτε εδώ υλικό Συμπιεσμένη Θεωρία και Οδηγίες σε όλη την ύλη του σχολικού βιβλίου της ΑΕΠΠ

Πηγή ((Δημήτρης Τζήμας))