Μάθημα : ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ

Μια εισαγωγή και επανάληψη στις βασικές έννοιες ΔΙΚΤΥΟ - ΔΙΚΤΥΟ ΥΠΟΛΟΓΙΣΤΩΝ -ΔΙΑΔΙΚΤΥΟ που έχουν διδαχθεί οι μαθητές στο Γυμνάσιο ώστε να εισαχθούν ομαλά στην ενότητα 9.3 Από το Web 1.0 στο Web X.0 και στην κατανόηση της έννοιας του Παγκόσμιου Ιστού και στην διάκρισή του από την έννοια του Διαδικτύου

ΤΙ ΕΙΝΑΙ ΤΟ ΔΙΚΤΥΟ ΚΑΙ ΤΟ ΔΙΑΔΙΚΤΥΟ

Στη συνέχεια

• αναλύονται και συζητιούνται έννοιες όπως το πρωτόκολλο επικοινωνίας του δικτύου, ο τεμαχισμός πακέτου με αφόρμιση από την προβολή του παρακάτω βίντεο:

ΠΩΣ ΛΕΙΤΟΥΡΓΕΙ ΤΟ ΔΙΑΔΙΚΤΥΟ

• παρουσιάζονται ιστορικά στοιχεία της εξέλιξης του Διαδικτύου

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

• παρουσιάζονται περιληπτικά στοιχεία για την δομή του Διαδικτύου και για το μοντέλο πελάτη-εξυπηρετητη

Δομή του Διαδικτύου

Η ΔΟΜΗ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ

• συζητιούνται έννοιες για την διεύθυνση IP και το DNS

ΕΠΑΝΑΛΗΨΗ

 Kahoot ΑΣ ΔΟΥΜΕ ΤΙ ΜΑΘΑΜΕ ΠΑΙΖΟΝΤΑΣ

Καταιγισμός ιδεών:

Παγκόσμιος Ιστός( WEB ή WWW)

Είναι το ίδιο ο Παγκόσμιος Ιστός και το Διαδίκτυο;

Ποιος και πότε έδωσε φτερά στον Παγκόσμιο ιστό;

Ας προσπαθήσουμε να ανακαλύψουμε τις απαντήσεις

1. Μελέτη του άρθρου : Σε τι διαφέρουν Το Διαδίκτυο και ο Παγκόσμιος Ιστός;
2. Μελέτη του άρθρου : Ο Άνθρωπος που ύφανε τον Παγκόσμιο Ιστό

Και τώρα ας ακούσουμε τον άνθρωπο που με την ανακάλυψή του έκανε προσιτό το Διαδίκτυο σε μια ενδιαφέρουσα διάλεξη στο TED 

 ΕΝΑ PADLET ΓΙΑ ΤΗΝ ΕΞΕΛΙΞΗ ΤΟΥ WEB

ΠΑΡΟΥΣΙΑΣΗ ΑΠΟ WEB 1.0 ΣΤΟ WΕΒ 3.0

ΕΝΑ ΕΝΔΙΑΦΕΡΟΝ ΑΡΘΡΟ ΓΙΑ ΤΗΝ ΕΞΕΛΙΞΗ ΤΩΝ ΙΣΤΟΣΕΛΙΔΩΝ ΣΤΑ ΔΙΑΦΟΡΑ ΣΤΑΔΙΑ ΤΗΣ ΕΞΕΛΙΞΗΣ ΣΤΟ WEB

ΠΑΡΟΥΣΙΑΣΗ ΕΠΑΝΑΛΗΠΤΙΚΗ

ΜΙΧΑΛΗΣ ΔΕΡΤΟΥΖΟΣ ΕΝΑΣ ΕΛΛΗΝΑΣ ΠΟΥ ΕΠΑΙΞΕ ΣΗΜΑΝΤΙΚΟ ΡΟΛΟ ΣΤΗΝ ΙΣΤΟΡΙΑ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ

BINTEO: Το εργαλείο περιήγησης του Παγκόσμιου Ιστού ! Browser ή Φυλλομετρητής

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

ΕΠΑΝΑΛΗΨΗ

Ερωτήσεις και απαντήσεις 

ΕΠΑΝΑΛΗΠΤΙΚΟ Kahoot

ΕΡΩΤΗΣΗ ΠΡΟΒΛΗΜΑΤΙΣΜΟΥ 

Οι μαθητές/τριες χωρίζονται σε ομάδες των 4 και απαντούν:

Σε τι διαφέρουν

• η Google
• η Google Search
• ο Google Chrome

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

Αν έχετε περιέργεια να δείτε μια παλαιότερη έκδοση μιας ιστοσελίδας , αρκεί να λειτουργεί τουλάχιστον 5 χρόνια, μεταβείτε στον ιστότοπο που επιλέξατε και παρατηρήστε την αρχική σελίδα του.

Έπειτα, χρησιμοποιήστε την υπηρεσία WayBackMachine, ώστε να ανακτήσετε μια παλαιότερη έκδοση της ιστοσελίδας που επιλέξατε. Προσπαθήστε να βρείτε όσο το δυνατόν πιο παλιά ημερομηνία.

Αν επιλέξτε διαφορετικές χρονικές περιόδους μπορείτε να παρατηρήσετε την εξέλιξη της ιστοσελίδας σο χρόνο!

Δοκιμάστε το με την ιστοσελίδα του σχολικού δικτύου www.sch.gr

Όποιος από εσας θέλει να πάει πέρα από την ύλη και το βιβλίο μας μπορεί να εισαχθεί στην έννοια του IoT -Το Διαδίκτυο των Πραγμάτων !

Και εδώ ένα μάθημα με ενσωματωμένο κουιζ για να μάθετε περισσότερα για το θαυμαστό κόσμο του IoT!

https://quizizz.com/join/presentation/637f398046b437001da31ff0/start?studentShare=true

ΕΡΩΤΗΣΕΙΣ ΑΝΙΧΝΕΥΣΗΣ

• Πώς χρησιμοποιούμε το Διαδίκτυο στην καθημερινότητά μας;
• Τι μας προσφέρουν οι διάφορες διαδικτυακές υπηρεσίες;
• Ποιά είναι η πιο βασική εφαρμογή του Διαδικτύου;

Παρουσίαση: Σύντομη εισαγωγή στις βασικές υπηρεσίες του Διαδικτύου

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

Οι μαθητές χωρίζονται σε ομάδες και εντοπίζουν τα Πλεονεκτήματα και Μειονεκτήματα των εφαρμογών του Παγκόσμιου ιστού(web apps) και των εγγενών εφαρμογών (Native App)

Ερώτηση ενεργοποίησης: "Τι είναι μια ιστοσελίδα; Που βρίσκονται αποθηκευμένες οι ιστοσελίδες;Πώς δημιουργούνται; Τι κρύβεται πίσω από τις ιστοσελίδες;" 

Δραστηριότητα σε ομάδες:

1. Aνοίξτε τον ιστότοπο της   Βικιπαίδεια https://el.wikipedia.org/wiki/%CE%A0%CF%8D%CE%BB%CE%B7:%CE%9A%CF%8D%CF%81%CE%B9%CE%B1.

 Αναζητήστε  τις παρακάτω έννοιες:   Ιστοσελίδα, http, HTML ( Στο πεδίο αναζήτηση σε Βικιπαίδεια γράψτε κάθε φορά την έννοια που θέλετε να αναζητήσετε).

Στη συνέχεια λύστε το σταυρόλεξο: https://crosswordlabs.com/view/1-html

ΟΔΗΓΙΕΣ : Κάθε φορά που συμπληρώνετε μια απάντηση μετά το πάτημα του Enter αν αυτή γίνεται πράσινη έχετε απαντήσει σωστά διαφορετικά η απάντησή σας θα εμφανίζεται κόκκινη.Δοκιμάστε μέχρι όλες σας οι απαντήσεις να είναι σωστές δηλαδή πράσινες.

ΠΑΡΟΥΣΙΑΣΕΙΣ;

ΦΥΛΛΟΜΕΤΡΗΤΕΣ & ΕΙΣΑΓΩΓΙΚΑ ΣΤΗΝ HTML

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ

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

• Ανοίξτε τον σύνδεσμο https://www.wlearn.gr/index.php/html-html-33  μελετήστε την δομή της HTML και απαντήστε στην παρακάτω ερώτηση
• ΠΡΟΣΟΧΗ!!! Αν δεν λειτουργεί η παραπάνω πλαρφόρμα δοκιμάστε τις ασκήσεις απο την https://www.w3schools.com/html/html_intro.asp

Ποιες είναι οι 2 εντολές – ετικέτες  που λείπουν στο παρακάτω πρόγραμμα HTML;

<html>

<head>

<title>Η πρώτη μου Ιστοσελίδα </title>

<body> Προσπαθώ να κατανοήσω την βασική δομή της <b>HTML</b><br>

Ελπίζω να τα καταφέρω!!!

</html>

•  πειραματιστείτε με το “Δοκίμασέ το” και ανακαλύψτε ποια είναι η λειτουργία των ετικετων: 

1. <b> …..</b>
2. <i>……..</i>
3. <u>…..</u>

ΕΝΑ ΒΙΝΤΕΟ ΜΕ ΤΙΣ ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ HTML

Και τώρα ας εξασκηθούμε ....

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 1 HTML

Μάθαμε λοιπόν και πως να δημιουργούμε τα διάφορα μεγέθη επικεφαλίδων με την HTML ή μήπως έχουμε ακόμη απορίες; Η επανάληψη ποτέ δεν μας βλάπτει!

Ας δούμε λοιπόν την παρακάτω παρουσίαση για να μην έχουμε καμιά αμφιβολία ότι έχουμε κατακτήσει το θέμα των επικεφαλίδων! Στη συνέχεια δημιουργήστε την σελίδα που αναφέρεται στο τέλος της παρουσίασης και ελέξτε το αποτέλεσμα στο φυλλομετρητή σας! Μπράβο παιδιά!

ΔΗΜΙΟΥΡΓΙΑ ΕΠΙΚΕΦΑΛΙΔΑΣ

Ας κάνουμε τώρα και μια άσκηση αυτοαξιολόγησης πάνω στα εισαγωγικά της HTML! Για να την κάνετε πηγαίνετε στο πλαινό μενού στις Ασκήσεις και επιλέξτε την ασκηση ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML!

Καλή επιτυχία!

ΕΡΩΤΗΣΗ ΠΡΟΒΛΗΜΑΤΙΣΜΟΥ 

Οι μαθητές/τριες χωρίζονται σε ομάδες των 2-3 και απαντούν:

Σε τι διαφέρουν οι ετικέτες <br>  και <p>...</p>; Πότε χρησιμοποιούμε την μια και πότε την άλλη;

Ελπίζω να απαντήσατε όλοι σωστά! Ας επιβεβαιώσουμε όμως την απάντηση στις παρακάτω παρουσιάσεις και στο σύντομο βίντεο! Ταυτόχρονα θα ανακαλύψουμε και την λειτουργία της ετικέτας <hr> αλλά και τον τρόπο εσαγωγής σχολίων στο αρχείο μας html!

ΠΑΡΟΥΣΙΑΣΕΙΣ

ΔΗΜΙΟΥΡΓΙΑ ΠΑΡΑΓΡΑΦΟΥ

ΕΙΣΑΓΩΓΗ ΟΡΙΖΟΝΤΙΑΣ ΓΡΑΜΜΗΣ ΚΑΙ ΕΙΣΑΓΩΓΗΣ ΣΧΟΛΙΩΝ

ΒΙΝΤΕΟ 

ΕΙΣΑΓΩΓΗ ΓΡΑΜΜΗΣ ΠΑΡΑΓΡΑΦΟΥ ΣΧΟΛΙΩΝ ΚΑΙ ΟΡΙΖΟΝΤΙΑΣ ΓΡΑΜΜΗΣ

Και τώρα ας εμπλουτίσουμε περισσότερο την ιστοσελίδα μας εισάγοντας υπερσυνδέσμους και πίνακες!

Αλήθεια ξέρουμε τι είναι ο υπερσύνδεσμος και τι το υπερκείμενο;Μμ! Ακούω τις ιδέες σας.....Ωραία για να δούμε τι θα ανακαλύψουμε ! Εμπρός πάμε!

ΒΙΝΤΕΟ: ΔΗΜΙΟΥΡΓΙΑ ΥΠΕΡΣΥΝΔΕΣΜΟΥ ΚΑΙ ΠΙΝΑΚΑ 

Λιγάκι δύσκολο και περίπλοκο η δημιουργία πίνακα με την HTML δεν σας φάνηκε; Ας περιοριστούμε προς το παρόν στους υπερσυνδέσμους!

ΠΑΡΟΥΣΙΑΣΗ : ΔΗΜΙΟΥΡΓΙΑ ΥΠΕΡΣΥΝΔΕΣΜΟΥ

Ωραία και τώρα η σειρά σας να δράσετε! Ας κάνετε λοιπόν μια μικρή και εύκολη δραστηριότητα !

ΔΡΑΣΤΗΡΙΟΤΗΤΑ ΣΤΟΥΣ ΥΠΕΡΣΥΝΔΕΣΜΟΥΣ

Επειδή όμως "μια εικόνα χίλιες λέξεις" τι θα ήταν οι ιστοσελίδες μας χωρίς εικόνες ; Ας παρακολουθήσουμε ένα βιντεάκι και ας δούμε και μια παρουσίαση πριν κάνουμε ασκησούλες !

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

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

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

ΔΡΑΣΤΗΡΙΟΤΗΤΑ 2  ΕΙΚΟΝΑ ΓΕΝΕΘΛΙΑ

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

Και τώρα που καταλάβαμε πως λειτουργεί η HTML ας πάμε ένα βηματάκι παραπέρα και ας κάνουμε ασκήσεις χωρίς ...λυσάρι! Τι λέτε;

ΑΣΚΗΣΕΙΣ ...ΧΩΡΙΣ ΛΥΣΑΡΙ

ΑΣΚΗΣΗ ΜΕ ΕΙΣΑΓΩΓΗ ΠΟΛΥΜΕΣΩΝ