Το ιστολόγιο της Πληροφορικής: Α' Λυκείου

Blinking feature using JavaScript

Αγαπητοί/ες μου μαθητές/τριες το blog αυτό έχει δημιουργηθεί για να σας βοηθήσει στο μάθημα της πληροφορικής. Απαιτείται να έχετε στο εργαστήριο πληροφορικής:

ένα τετράδιο 20 φύλλων
στυλό για να κρατάτε σημειώσεις για το μάθημα

Το εργαστήριο το σεβόμαστε και το προστατεύουμε ώστε να μπορούν να μορφώνονται όλοι οι μαθητές του Σχολείου.

Μέσα στο εργαστήριο:

Δεν φέρνουμε τρόφιμα ή ροφήματα. Επιτρέπεται μόνο μπουκαλάκι νερό.
Δεν μασάμε τσίχλα η καραμέλα
Καθόμαστε ΑΠΟΚΛΕΙΣΤΙΚΑ στον υπολογιστή που μας έχει ανατεθεί, ελέγχουμε την λειτουργία του και αναφέρουμε κατευθείαν στον εκπαιδευτικό τυχόν φθορές που θα παρατηρήσουμε (π.χ. πλήκτρα που λείπουν, οθόνη ή υπολογιστής ή οτιδήποτε που δυσλειτουργεί κλπ)
Δεν αλλάζουμε την εικόνα στην επιφάνεια εργασίας ούτε τροποποιούμε τα εικονίδια.
Δεν εγκαθιστούμε προγράμματα.
Δεν παίζουμε παιχνίδια εκτός εάν μας το έχει επιτρέψει ο εκπαιδευτικός
Δεν προκαλούμε φθορές στον εξοπλισμό
Αφήνουμε ανοιχτό στην επιφάνεια εργασίας τον υπολογιστή μας κατά την έξοδό μας από το εργαστήριο.

Το βιβλίο πληροφορικής μπορείτε να το ανοίξετε οnline εδώ

Γρήγορη μετάβαση
Ενότητα 2, Κεφ. 7: Υλοποίηση εφαρμογών σε προγραμματιστικά περιβάλλοντα
Ενότητα 3, Κεφ. 9: Διαδίκτυο
Ενότητα 3, Κεφ. 10: Υπηρεσίες και εφαρμογές διαδικτύου
Ενότητα 3, Κεφ. 11: Εισαγωγή στην HTML

Ενότητα 2, Κεφ. 7: Υλοποίηση εφαρμογών σε προγραμματιστικά περιβάλλοντα

7.1 Προγραμματισμός εφαρμογών για φορητές συσκευές

Ανάπτυξη εφαρμογών για φορητές συσκευές

Οι φορητές συσκευές, κυρίως τα έξυπνα κινητά (smartphones) και οι ταμπλέτες (tablets), έχουν διεισδύσει σε πολλούς τομείς της ανθρώπινης δραστηριότητας, όπως είναι η ενημέρωση, η ψυχαγωγία και η εργασία. Οι συσκευές αυτές γίνονται ολοένα και πιο δημοφιλείς και χρηστικές χάρη στο πλήθος εφαρμογών και δυνατοτήτων που διαθέτουν. Επίσης, τείνουν σε αρκετές περιπτώσεις να αντικαταστήσουν τους υπολογιστές και μια πληθώρα άλλων συσκευών, όπως είναι οι φωτογραφικές μηχανές και οι MP3 players.

Οι φορητές συσκευές υποστηρίζονται από Λειτουργικά Συστήματα τα οποία διακρίνονται από συγκεκριμένα χαρακτηριστικά. Τα δημοφιλέστερα Λειτουργικά Συστήματα είναι το iOS και Android.

Οι εφαρμογές που αναπτύσσονται για φορητές συσκευές είναι πολλών κατηγοριών: παιχνίδια, ψυχαγωγίας, κοινωνικής δικτύωσης, επικοινωνίας, εκπαιδευτικές, ενημέρωσης, ηλεκτρονικού εμπορίου κ.ά. Οι χρήστες μπορούν να κατεβάσουν τις εφαρμογές της προτίμησής τους, κάποιες δωρεάν και κάποιες άλλες επί πληρωμή, από ηλεκτρονικά καταστήματα, για παράδειγμα το Google Play για το Android, το App Store για το iOS.

Οι επαγγελματίες προγραμματιστές εφαρμογών για φορητές συσκευές χρησιμοποιούν ολοκληρωμένα περιβάλλοντα ανάπτυξης εφαρμογών, επαγγελματικές γλώσσες προγραμματισμού (π.χ. Java) και αντιμετωπίζουν προβλήματα που σχετίζονται με τους περιορισμένους πόρους των συσκευών (π.χ. επεξεργαστής, μνήμη), με το μικρό μέγεθος της διεπαφής χρήστη, με θέματα ασφάλειας, με τεχνολογίες αυτόματου προσδιορισμού της θέσης του χρήστη κ.ά. Ένας αρχάριος προγραμματιστής που φιλοδοξεί να αναπτύξει τις πρώτες του εφαρμογές για Android μπορεί να χρησιμοποιήσει το εκπαιδευτικό περιβάλλον App Inventor.

To εκπαιδευτικό περιβάλλον ανάπτυξης εφαρμογών App Inventor

Η ανάγκη για εύκολη ανάπτυξη εφαρμογών για φορητές συσκευές με Android οδήγησε αρχικά τα εργαστήρια της Google στη δημιουργία του App Inventor, ενός ελεύθερου, διαδικτυακού και οπτικού προγραμματιστικού περιβάλλοντος με πλακίδια (blocks), όπως και το Scratch. Στη συνέχεια, το γνωστό κορυφαίο αμερικάνικο πανεπιστήμιο MIT (Massachusetts Institute of Technology) ανέλαβε την ανάπτυξη και συντήρηση αυτού. Ακόμα και ένας αρχάριος χρήστης μπορεί να συνδεθεί στο App Inventor και με διαδικασία «σύρε και άφησε» να συνδυάσει πλακίδια και να αναπτύξει εφαρμογές για φορητές συσκευές με Android, το οποίο επίσης κατασκεύασε η Google βασισμένη στο ελεύθερο κι ανοικτό λειτουργικό σύστημα για υπολογιστές Linux. Τα πλακίδια ενώνονται μόνο όταν προκύπτει συντακτικά σωστό πρόγραμμα, και η τελική εφαρμογή μπορεί να εκτελεστεί και να δοκιμαστεί είτε απευθείας σε συσκευή που είναι συνδεδεμένη με τον υπολογιστή του χρήστη (ενσύρματα με USB ή ασύρματα με WiFi) είτε σε ενσωματωμένο emulator (προσομοιωτή κινητού τηλεφώνου).

Η κλασική δομή του περιβάλλοντος του App Inventor αποτελείται από: (α) τον Designer (Σχεδιαστή), όπου ο χρήστης επιλέγει τα συστατικά μέρη για την εφαρμογή που αναπτύσσει, και (β) τον Blocks Editor (Συντάκτη πλακιδίων), όπου ο χρήστης συνδυάζει οπτικά τα πλακίδια του προγράμματος, για να ορίσει τη συμπεριφορά των μερών της εφαρμογής (μοιάζει με τη συναρμολόγηση ενός πάζλ). Τα πλακίδια είναι ταξινομημένα σε διαφορετικά χρώματα ανάλογα με τη λειτουργία που επιτελούν.

Η δομή του App Inventor

Όταν ο χρήστης ολοκληρώσει την εφαρμογή του μπορεί είτε να τη «συσκευάσει», για να παραγάγει το τελικό πρόγραμμα σε μορφή .apk (Android application package), προκειμένου να το εγκαταστήσει στην Android συσκευή του, είτε ακόμη να το διανείμει δωρεάν ή εμπορικά στο Google Play. Εναλλακτικά, αν δεν υπάρχει διαθέσιμη κάποια συσκευή Android, ο χρήστης έχει τη δυνατότητα να δημιουργήσει και να ελέγξει τη λειτουργία της εφαρμογής του, χρησιμοποιώντας τον προσομοιωτή Android Emulator, ο οποίος είναι λογισμικό που εκτελείται τοπικά στον υπολογιστή του και συμπεριφέρεται σαν ένα κινητό τηλέφωνο.

Διαδικασία δημιουργίας μιας εφαρμογής στο App Inventor

Αρχικά, επισκεπτόμαστε τον επίσημο ιστότοπο του App Inventor (Ο επόμενος υπερσύνδεσμος), ο οποίος περιέχει υλικό στην αγγλική γλώσσα με υποστηρικτικές οδηγίες, οδηγούς εκμάθησης, βιβλιοθήκες, ομάδες συζητήσεων κ.ά. Για να έχουμε δικαίωμα πρόσβασης στο προγραμματιστικό περιβάλλον, θα πρέπει να διαθέτουμε λογαριασμό στην Google. Για όσους δεν έχουν λογαριασμό, η εγγραφή είναι εύκολη και δωρεάν. Επιλέγουμε τον σύνδεσμο Create και στο παράθυρο που μας ανοίγει κάνουμε είσοδο με τα στοιχεία του λογαριασμού μας. Επιλέγουμε Create Apps!

App Inventor (new edition, απαιτείται σύνδεση)

Εάν δεν έχουμε λογαριασμό google η/και δεν θέλουμε να δημιουργήσουμε, τότε μπαίνουμε στο App Inventor με την παρακάτω σύνδεση που δεν είναι όμως η τελευταία έκδοση του App Inventor.

App Inventor (Χωρίς σύνδεση)

Για να μπορεί να δουλέψει ο emulator, πρέπει να εγκατασταθεί το βοηθητικό πρόγραμμα MIT Appinventor Tools. Οι οδηγίες για την εγκατάστασή του καθώς και η λήψη του (download) δίνονται από τον παρακάτω σύνδεσμο:

Install MIT Appinventor Tools guide

Εφαρμογή ώστε να μπορείτε να κατεβάζετε τα προγράμματά σας σε κινητό η tablet, MIT AI2 Companion.

Quiz!!!

Μπείτε στο joinmyquiz.com όταν σας πει ο εκπαιδευτικός σας πληκτρολογήστε το πραγματικό ονομά σας τον κωδικό που θα σας δοθεί και παίξτε QUIZ!!!

Φύλλα εργασίας Appinventor

Φύλλο εργασίας 01: Η γάτα νιαουρίζει
Οδηγίες κατασκευής
Βοηθητικά αρχεία:
kitty.png
meow.mp3

Φύλλο εργασίας 02: Ο σκύλος φρουρός (GuardDog)
Οδηγίες κατασκευής
Βοηθητικά αρχεία: Όλα σε zip
AngryDog.png
Bark.mp3
Grass.jpg
SleepyDog.png

Φύλλο εργασίας 03: Ζωγραφική (FingerPainting)
Οδηγίες κατασκευής
Βοηθητικά αρχεία: Όλα σε zip
photo.png
clear.png
save.jpg

Φύλλα εργασίας Appinventor

Ενότητα 3, Κεφ. 9: Διαδίκτυο, 9.3 Από τον web 1.0 στον Web x.0

διαβασμα από το βιβλίο

Άρθρο για τις εφαρμογές και εργαλεία Web 2.0

Δραστηριότητες

1. Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες (2 ώρες)
1. Δίκτυο και διαδίκτυο (Βρες ζευγάρια) - 10'

Ενότητα 3, Κεφ. 10: Υπηρεσίες και εφαρμογές διαδικτύου

διαβασμα από το βιβλίο

προσαρμοστικός σχεδιασμός ιστοσελίδων (Responsive web apps)

Οι σύγχρονες web εφαρμογές χαρακτηρίζονται από responsive σχεδίαση, δηλαδή προσαρμόζονται αυτόματα σε διαφορετικά μεγέθη και αναλύσεις οθόνης. Χρησιμοποιώντας τεχνικές όπως τα flexible layouts, τα responsive grids και τα media queries της CSS, το περιεχόμενο μιας ιστοσελίδας εμφανίζεται σωστά τόσο σε υπολογιστές όσο και σε tablets ή κινητά τηλέφωνα. Με αυτόν τον τρόπο, ο χρήστης απολαμβάνει ομοιόμορφη και ευχάριστη εμπειρία πλοήγησης, ανεξάρτητα από τη συσκευή που χρησιμοποιεί.

Δραστηριότητες

2. Υπηρεσίες επικοινωνίας στο διαδίκτυο (Βρες ζευγάρια) - 10'

Δραστηριότητες για το σπίτι

Ψάξτε στο διαδίκτυο (η/και σε μηχανές αναζήτησης αφού διασταυρώσετε κατάλληλα τις πληροφορίες που θα πάρετε) πληροφορίες για τα παρακάτω θέματα και γράψτε μια σχετική παράγραφο.

Τι είναι τα πρωτόκολλα SMTP, POP3, IMAP (email);

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

Αναφέρατε σύγχρονα προγράμματα ανταλλαγής μηνυμάτων (instant messaging); Τι δυνατότητες προσφέρουν; Πως διασφαλίζεται η ιδιωτικότητα των χρηστών;

Τι είναι τα πρωτόκολλα FTP και SFTP; Πως λειτουργούν;

Τι είναι τα ομότιμα δίκτυα ανταλλαγής αρχείων; Τι είναι τα torrent links; Ποιά η διαφορά από τα magnet links;

Τι είναι το πρωτόκολλο SSH και που χρησιμοποιείται;

Ποιές είναι οι διαφορές των web apps με τις native apps; Ποια τα πλεονεκτήματα της κάθε μιας κατηγορίας;

Τι είοναι οι υπηρεσίες διαδικτύου (web services); Περιγράψτε σύγχρονα πρωτόκολλα που χρησιμοποιουνται για web services. Δώστε ένα παράδειγμα χρήσης.

Την εργασία μπορείτε να την κάνετε είτε στο τετράδιο, είτε με ανάρτηση στο padlet. Στην ερώτηση πως να σας φωνάζουμε, γράψτε στα Ελληνικά το όνομά σας.

Ενότητα 3, Κεφ. 11: Εισαγωγή στην HTML

11.1 Γενική εισαγωγή στην HTML

Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου. Οι ιστοσελίδες που επισκεπτόμαστε στο Internet δεν είναι τίποτε άλλο παρά αρχεία τα οποία περιέχουν κώδικα γραμμένο στη γλώσσα HTML. Άρα, αν κάποιος γνωρίζει να συντάσσει κώδικα σε html, τότε ξέρει ένα από τα βασικά συστατικά, για να δημιουργήσει ένα web site.

Η HTML δεν είναι μια γλώσσα προγραμματισμού αλλά μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Oρίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται ετικέτες (tags).

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

Ιστορική Αναδρομή

διαβασμα από το βιβλίο

Βασικές ετικέτες - Δομή μιας ιστοσελίδας

Παρακολουθήστε το από το 3:30 μέχρι το 6:10.

Τα αρχεία της HTML πρέπει να τα γράφουμε σε συντάκτες κειμένων, δηλαδή προγράμματα που μπορούν να αποθηκεύσουν αρχεία κειμένου σε μορφή ASCII, όπως το Σημειωματάριο των Windows, το notepad++ κλπ., με επέκταση αρχείου .html ή .htm.

Τα αρχεία της HTML περιέχουν τα ακόλουθα :

το κείμενο της ιστοσελίδας.

τις ετικέτες της HTML, που υποδεικνύουν τα στοιχεία, τη δομή και τη μορφοποίηση των ιστοσελίδων, καθώς επίσης και τους συνδέσμους υπερ-κειμένου προς άλλες ιστοσελίδες ή προς αρχεία άλλων μορφών (πολυμέσα).

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

<ΌνομαΕτικέτας> επηρεαζόμενο κείμενο </ΌνομαΕτικέτας>
Η HTML χρησιμοποιεί διάφορες ετικέτες για την περιγραφή της συνολικής δομής μιας ιστοσελίδας. Οι ετικέτες αυτές καθορίζουν την κατασκευή και εμφάνιση της ιστοσελίδας μας στους φυλλομετρητές, και παρέχουν απλές πληροφορίες για την ιστοσελίδα όπως τον τίτλο και τον συγγραφέα της.

Ο βασικός σκελετός που κάθε ιστοσελίδα πρέπει οποσδήποτε να περιλαμβάνει είναι:
<html>
<head>
    <title> Εδώ είναι ο τίτλος </title>
</head>
<body>
   ... κυρίως κείμενο ...
</body>
</html>
    
Δεν έχει σημασία για τον φυλλομετρητή, εάν οι ετικέτες γραφούν με κεφαλαία ή πεζά.

Όλες οι ετικέτες της HTML σχηματίζουν ξεχωριστές, ένθετες ενότητες κειμένου, και πρέπει να προσέχουμε, ώστε να μην υπάρχει επικάλυψη μεταξύ των ετικετών. Δηλαδή, πρέπει να κλείνουμε κάθε ετικέτα που ανοίγουμε, εκτός κι αν είναι μονομερής. Ακόμα και όταν κλείνουμε μια ετικέτα, κλείνουμε την πιο πρόσφατη που ανοίξαμε.
Συνεπώς απαγορεύεται να έχουμε:
<a>  <b> </a>  </b>
    
Δραστηριότητα 01: Δημιουργία της πρώτης μου ιστοσελίδας

ανοίξτε νέο αρχείο σε έναν απλό κειμενογράφο (προτείνεται o notepad++) και αποθηκεύστε το στον φάκελο που θα σας υποδείξει ο εκπαιδευτικός σας με το όνομα exersise01.html

Πληκτρολογήστε τον παραπάνω HTML βασικό σκελετό και αποθηκεύστε το.

Κάντε διπλό κλικ στο αρχείο αυτό και δείτε τι κατασκευάσατε!

Που εμφανίζεται το κείμενο Εδώ είναι ο τίτλος;

Οι ετικέτες επικεφαλίδων

Οι επικεφαλίδες (headings) χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμένου ακριβώς όπως και σ’ ένα βιβλίο. Η HTML ορίζει 6 επίπεδα επικεφαλίδων, των οποίων οι ετικέτες έχουν την εξής μορφή:

<h1>Τίτλος Επικεφαλίδας</h1>

Οι αριθμοί υποδεικνύουν το επίπεδο επικεφαλίδας (Η1 έως Η6). Οι επικεφαλίδες δεν αριθμούνται, όταν εμφανίζονται στην οθόνη, αλλά έχουν ένα χαρακτηριστικό που τις ξεχωρίζει από το κανονικό κείμενο όπως μεγαλύτερο μέγεθος ή εντονότερο κείμενο ή υπογράμμιση.

Οι συνδεσμοι/υπερσύνδεσμοι (links/hyperlinks)

Για τη δημιουργία ενός συνδέσμου σε μια HTML ιστοσελίδα, χρησιμοποιούμε τις ετικέτες <a> και </a> (anchor). Η ετικέτα <a> (Anchor Tag) είναι το θεμελιώδες στοιχείο της HTML για τη δημιουργία συνδέσμων, επιτελώντας διπλό ρόλο: χρησιμοποιείται, μέσω της ιδιότητας href, για τη δημιουργία υπερσυνδέσμων (hyperlinks) που οδηγούν τον χρήστη σε άλλες ιστοσελίδες ή αρχεία (εξωτερική πλοήγηση), αλλά και για τη δημιουργία δεσμών (anchors) προς συγκεκριμένα σημεία της ίδιας σελίδας, όταν το href περιέχει το σύμβολο δίεσης (#) ακολουθούμενο από το id του σημείου προορισμού (εσωτερική πλοήγηση). αποκαλείται συχνά και ετικέτα δεσμού (anchor tag). Η απλή μορφή της είναι η εξής:

Σύνδεσμος προς κάποιο άλλο σημείο στην ίδια ιστοσελίδα:

<a href="#section-5">Μετάβαση στα Συμπεράσματα">ΠΣΔ</a>

Σύνδεσμος προς εξωτερική ιστοσελίδα:

<a href="http://www.sch.gr">ΠΣΔ</a>

Η ιδιότητα href (Hypertext REFerence, αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του υπερκειμένου στο οποίο δείχνει ο σύνδεσμος. Στην ιστοσελίδα είναι ορατό μόνο το δεύτερο μέρος (στην παραπάνω περίπτωση «ΠΣΔ») και όταν κάνουμε κλικ πάνω του, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος (υπερκείμενο) ως σημείο προορισμού.

Ο παραπάνω υπερσύνδεσμος φεύγει από την ιστοσελίδα που βρισκόμαστε και μας οδηγεί στην ιστοσελίδα του ΠΣΔ. Εάν προτιμούμε να μην φεύγει η ιστοσελίδα μας αλλά να ανοίγει νέα καρτέλα στον φυλλομετρητή, τότε χρησιμοποιούμε την ιδιότητα target="_blank" όπως φαίνεται παρακάτω:

<a href="http://www.sch.gr" target="_blank">ΠΣΔ</a>

Δραστηριότητα 02: Χρήση επικεφαλίδων και υπερσυνδέσμων

ανοίξτε το αρχείο exersise01.html σε έναν απλό κειμενογράφο (προτείνεται o notepad++) και αποθηκεύστε το ως exersise02.html

Αντικαταστήστε τον τίτλο με την λέξη Επικεφαλίδες.

Αντικαταστήστε το κείμενο στο body με τις 6 ετικέτες όπως εμφανίζονται στο βιβλίο στην σελίδα 96.

δημιουργήστε έναν υπερσύνδεσμο που να λέει google και με κλικ να ανοίγει νέα καρτέλα (target="_blank") που να ανοίγει την κεντρική σελίδα του google.

δημιουργήστε έναν υπερσύνδεσμο που να λέει Επιστροφή στην άσκηση 01 και με κλικ να οδηγεί στην άσκηση 1.

Aποθηκεύστε.

Κάντε διπλό κλικ στο αρχείο αυτό και δείτε τι κατασκευάσατε!

Εργαλεία
htmlinstant: Online κειμενογράφος συγγραφής HTML
w3 schools: Online μαθήματα εκμάθησης HTML

Φύλλα εργασίας
Φύλλο εργασίας 01
Φύλλο εργασίας 02

Εισαγωγή εικόνων

Αφού αποκτήσουμε μια εικόνα σε μορφή GIF ή JPEG, μπορούμε να τη συμπεριλάβουμε σε μια ιστοσελίδα. Οι ένθετες εικόνες υποδεικνύονται με την ετικέτα <img> (image), η οποία δεν έχει ετικέτα τέλους, αλλά έχει πολλές ιδιότητες, με πιο σημαντική τη SRC (source). Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε, γραμμένο μέσα σε εισαγωγικά. Η εντολή στην απλούστερή της μορφή είναι:
<img src="images/image001.jpg″>
όπου η ιδιότητα src δείχνει το σημείο στο οποίο βρίσκεται η εικόνα.

Η παραπάνω εντολή, εισάγει την εικόνα στην ιστοσελίδα με το πραγματικό της μέγεθος, πραγμα το οποίο μπορεί να μην είναι αυτό που επιθυμούμε. Για να περιορίσουμε τις διαστάσεις της εικόνας στις διαστάσεις που επιθυμούμε χρησιμοποιούμε τις ιδιότητες width (πλάτος) και height (ύψος). Έτσι εάν θέλουμε η εικόνα μας να καταλαμβάνει χώρο 640 pixels σε πλάτος και 480 pixels σε ύψος τότε η εντολή θα έχει την παρακάτω μορφή:
<img src="images/image001.jpg" width="640" height="480">
Δραστηριότητα 03: Χρήση εικόνων

Δημιουργήστε έναν φάκελο με το όνομα images ένα επίπεδο κάτω απο τον φάκελο που έχετε αποθηκευμένες τις ιστοσελίδες που έχετε κατασκευάσει ήδη.

από το διαδίκτυο κατεβάστε 6 εικόνες, μια για τον γαλαξία milky way, μια για την γη, μια για την Ευρώπη, μια για την Ελλάδα, μια για την Κρήτη και μια για το Ηράκλειο.

Μετακινήστε τις 6 εικόνες που κατεβάσατε στομ φάκελο images που δημιουργήσατε στο βήμα 1.

Aνοίξτε το αρχείο exersise02.html, που δημιουργήσατε σε προηγούμενη άσκηση, με έναν απλό κειμενογράφο (προτείνεται o notepad++) και αποθηκεύστε το ως exersise03.html.

Αντικαταστήστε τον τίτλο της ιστοσελίδας με Βάζω Εικόνες

Εισάγετε κάτω από κάθε επικεφαλίδα (h1, h2...) την αντίστοιχη εικόνα που κατεβάσατε σε ένα πλαίσιο με διαστάσεις 320 pixels πλάτος (width) και 200 pixels ύψος.

Aποθηκεύστε.

Κάντε διπλό κλικ στο αρχείο αυτό και δείτε τι κατασκευάσατε!!!

Εισαγωγή video

Η εισαγωγή βίντεο και ήχου σε ένα έγγραφο HTML5 είναι πολύ απλή διαδικασία και αποτελεί παράδειγμα ενσωμάτωσης περιεχομένου, δυνατότητας που παρουσιάζεται εκτενέστερα παρακάτω. Η ετικέτα video περιλαμβάνει ιδιότητες που καθορίζουν στοιχεία όπως το μέγεθος του βίντεο, το αν θα παρέχονται πλήκτρα ελέγχου όπως έλεγχος έντασης ήχου και διακοπής της αναπαραγωγής. Υπάρχουν 2 τρόποι σύνταξης.
<video src="giorti.mp4" width="320" height="240" controls>
<video width="320" height="240" controls>
    <source src="video1.mp4" />
    <source src="video1.avi" />
    Μη υποστηριζόμενο video!
</video>
Η διαφορά μεταξύ των δύο, βρίσκεται ότι στον δεύτερο τρόπο επιπλέον, εάν ο φυλλομετρητής δεν υποστηρίζει το πρώτο video (στο παράδειγμα video.mp4), θα προσπαθήσει να δείξει το δεύτερο video και εάν δεν υποστηρίζει ούτε αυτό το video τότε θα εμφανίσει `Μη υποστηριζόμενο video!` για να ενημερώσει τον χρήστη ότι δεν μπορεί να αναπαράξει το βίντεο.

Η ετικέτα video έχει πολλές ιδιότητες. Οι βασικότερες παρατίθενται παρακάτω:

src: Το URL του video.

width: To πλάτος σε pixels.

height: To ύψος σε pixels.

controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play.

autoplay: To video θα ξεκινήσει αυτόματα μόλις φορτώσει.

loop: Αν θα επαναλαμβάνεται το video μετά το τέλος του.

ενσωμάτωσης - embedding

Η ετικέτα video ωστόσο μπορεί να χρησιμοποιηθεί μόνο εάν το video βρίσκεται τοπικά στον υπολογιστή μας ή στον web server. Εάν το βίντεο διατίθεται από πλατφόρμα βίντεο, τότε πρέπει να χρησιμοποιηθεί η ετικέτα iframe με παρόμοιες ιδιότητες με την ετικέτα video. Ωστόσο οι δικτυακές εφαρμογές αυτού του τύπου δίνουν την δυνατότητα ενσωμάτωσης - embedding, δηλαδή μας δίνουν έτοιμο τον κώδικά ενσωμάτωσης του video στην ιστοσελίδα μας. Παρακάτω βλέπουμε ένα παράδειγμα κώδικά ενσωμάτωσης με την ετικέτα iframe από το youtube.

Η κυριότερη ετικέτα που χρησιμοποιείται για ενσωμάτωση περιεχομένου είναι η iframe, η οποία υποστηρίζει πολλές ιδιότητες (καθορισμού μεγέθους, loop κλπ) όπως και η video και η οποία λειτουργεί ως ένα κομμάτι ξεχωριστής πλοήγησης μέσα σε μια ιστοσελίδα. Η ενσωμάτωση μπορεί επίσης να επιτευχθεί με χρήση της ετικέτας div σε συνδυασμό με κώδικα στη γλώσσα προγραμματισμού Javascript. Παρόλα αυτά δεν απαιτείται καμία γνώση, για να μπορέσει κανείς να ενσωματώσει περιεχόμενο. Αρκεί να γίνει αντιγραφή του κώδικα ενσωμάτωσης και επικόλληση στο έγγραφο HTML της ιστοσελίδας μας.

Δραστηριότητα 04: Χρήση video

ανοίξτε το αρχείο exersise02.html σε έναν απλό κειμενογράφο (προτείνεται o notepad++) και αποθηκεύστε το ως exersise04.html. ΠΡΟΣΟΧΗ!!! Είναι σημαντικό να ονομάσετε το αρχείο ακριβώς έτσι!!!

Αντικαταστήστε τον τίτλο με την λέξη Εισαγωγή βίντεο

από πλατφόρμα βίντεο ελεύθερης αναπαραγωγής (youtube, vimeo κλπ.) θα αντιγράψετε έναν συνδέσμο για ενσωμάτωση βίντεο για τον γαλαξία milky way. Η λειτουργία που θα ψάξετε θα είναι μια εκ των κοινοποίηση, ενσωμάτωση ή embed. επικολλήστε τον κώδικα ενσωμάτωσης κάτω από την επικεφαλίδα <h1>

Εφαρμόστε το παραπάνω βήμα και για τις υπόλοιπες ετικέτες <h2> έως <h6> βρίσκοντας βίντεο για την γη, την Ευρώπη, την Ελλάδα, την Κρήτη και το Ηράκλειο.

Δοκιμάστε εάν παίζουν τα βίντεο εκτελώντας την ιστοσελίδα σας. Εάν όχι πηγαίνετε στην παρακάτω ενότητα επίλυση προβλημάτων αναπαραγωγής βίντεο.

Κατεβάστε δύο αρχεία βίντεο από εδώ (Video1.mp4) και εδώ (Video1.wmv) και αποθηκεύστε τα στον φάκελο images που δημιουργήσατε στην προηγούμενη δραστηριότητα 3 ή δημιουργήστε τον εάν δεν υπάρχει.

Εισάγετε τα video σε μία ετικέτα video με τον 2ο τρόπο σύνταξης που μάθαμε στο τέλος της ιστοσελίδας σας.

Aποθηκεύστε.

Κάντε διπλό κλικ στο αρχείο αυτό και δείτε τι κατασκευάσατε!

Eπίλυση προβλημάτων αναπαραγωγής βίντεο

Κάποιοι ιστότοποι όπως είναι για παράδειγμα το Youtube, δεν επιτρέπουν την ενσωμάτωση κώδικα σε τοπικές ιστοσελίδες όπως αυτές που κάνουμε εμείς στο εργαστήριο μας για λόγους πρόσθετης ασφάλειας. Για τον λόγο αυτό πρέπει να μετατρέψουμε τουν υπολογιστές μας σε εικονικούς εξυπηρετητές ιστοσελίδων (virtual server).
Πατήστε δεξί κλίκ στην σημαία των windows κάτω αριστερά (η ίσως στο κέντρο στα windows 11) --> Windows Powershell

Αντιγράψτε την εντολή cd "\class\Α2" στο παράθυρο powershell που άνοιξε ώστε να επισκευτείτε τον φάκελο στον οποίο έχετε την ιστοσελίδα σας. Εάν βγάλει μήνυμα λάθους θα σας πει ο εκπαιδευτικός ποιά εντολή πρέπει να γράψετε.
Αντιγράψτε τον παρακάτω κώδικά στο παράθυρο powershell που άνοιξε.
        $http = [System.Net.HttpListener]::new(); 
$http.Prefixes.Add("http://localhost:8000/"); 
$http.Start(); 
Write-Host "Server started at http://localhost:8000/" -ForegroundColor Green;

while ($http.IsListening) { 
    $context = $http.GetContext(); 
    $requestPath = [System.Uri]::UnescapeDataString($context.Request.Url.LocalPath.TrimStart('/'));
    $fullPath = Join-Path (Get-Location) $requestPath;
    
    if (Test-Path $fullPath -PathType Leaf) {
        # --- Η ΚΡΙΣΙΜΗ ΠΡΟΣΘΗΚΗ ---
        if ($fullPath -match '\.html$') { $context.Response.ContentType = "text/html" }
        elseif ($fullPath -match '\.js$') { $context.Response.ContentType = "application/javascript" }
        elseif ($fullPath -match '\.css$') { $context.Response.ContentType = "text/css" }
        # --------------------------

        $file = [System.IO.File]::ReadAllBytes($fullPath); 
        $context.Response.OutputStream.Write($file, 0, $file.Length); 
    } else {
        $context.Response.StatusCode = 404;
    }
    $context.Response.Close();
}
Τώρα, ανοίξτε τον browser σας (π.χ. google chrome ή Microsoft Edge), και αντιγράψτε στην διεύθυνση (ΟΧΙ στην αναζήτηση του Google): http://localhost:8000/exersise04.html
Εάν δεν καταστεί εφικτό να λειτουργήσει η ενσωμάτωση βιντεο με τις παραπάνω οδηγίες, τότε επιλέξτε και αντιγράψτε όλον κώδικα της ιστοσελίδας σας (ctrl+A και ctrl+C) και αφού ανοίξτε τον σύνδεσμο https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default διαγράψτε το υπάρχοντα κώδικα από το αριστερό μέρος και επικολλήστε τον δικό σας κώδικά. Πατώντας την λειτουργία Run, στο δεξί μέρος θα εμφανιστεί η λειτουργική ιστοσελίδα σας!

CSS: καθορισμός της εμφάνισης

Η CSS, αρχικά των λέξεων Cascading Style Sheets, είναι μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML.

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

Υπάρχουν τρεις τρόποι ενσωμάτωσης κανόνων CSS:
Ενσωμάτωση (Inline CSS): Οι κανόνες CSS γράφονται απευθείας μέσα στο HTML στοιχείο με το χαρακτηριστικό style. Παράδειγμα:
<p style="color:red;">Αυτό είναι κόκκινο κείμενο.</p>
Στο τμήμα <head> (εσωτερικό CSS): Οι κανόνες CSS γράφονται μέσα σε ετικέτα <style> στο <head> του εγγράφου. Παράδειγμα:
<style>
  p {
    color: blue; 
    font-size: 18px;
  }
</style>
      
Εξωτερικό αρχείο CSS: Οι κανόνες CSS τοποθετούνται σε ξεχωριστό αρχείο (π.χ. styles.css) και συνδέονται με <link> στο <head>. Παράδειγμα:
<link rel="stylesheet" href="styles.css">
      
Η CSS (Cascading Style Sheets) χρησιμοποιείται για να ομορφαίνει μια ιστοσελίδα — δηλαδή να αλλάζει χρώματα, γραμματοσειρές, μεγέθη, περιθώρια κ.ά.

Η βασική μορφή ενός κανόνα CSS είναι:
  επιλογέας {
    ιδιότητα1: τιμή1;
    ιδιότητα2: τιμή2;
    ...
  }
  
όπου:

επιλογέας (selector): δείχνει σε ποιο HTML στοιχείο θα εφαρμοστούν οι κανόνες (π.χ. p, h1, body).

ιδιότητα (property): είναι τι θέλουμε να αλλάξουμε (π.χ. color, font-size, background-color).

τιμή (value): είναι πώς θέλουμε να το αλλάξουμε (π.χ. red, 20px, blue).

Έτσι για παράδειγμα:
<style>
  p {
    color: blue; 
    font-size: 18px;
  }
</style>
      
σημαίνει ότι ολα τα κείμενα μέσα στα <p> (παράγραφοι) θα είναι μπλε και θα έχουν μέγεθος 18 pixel.

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

Φύλλα εργασίας στο CSS
Φύλλο εργασίας 03       Βοηθητικά αρχεία      mirror
Δραστηριότητα: Δημιουργός χρωμάτων (Color picker)

Φύλλο εργασίας 04

Quiz!!!

Μπείτε στο joinmyquiz.com όταν σας πει ο εκπαιδευτικός σας πληκτρολογήστε το πραγματικό ονομά σας τον κωδικό που θα σας δοθεί και παίξτε QUIZ!!!

Δευτέρα 1 Σεπτεμβρίου 2025

Α' Λυκείου - Εφαρμογές πληροφορικής

Αγαπητοί/ες μου μαθητές/τριες το blog αυτό έχει δημιουργηθεί για να σας βοηθήσει στο μάθημα της πληροφορικής. Απαιτείται να έχετε στο εργαστήριο πληροφορικής:

ένα τετράδιο 20 φύλλων

στυλό για να κρατάτε σημειώσεις για το μάθημα

Το εργαστήριο το σεβόμαστε και το προστατεύουμε ώστε να μπορούν να μορφώνονται όλοι οι μαθητές του Σχολείου.

Μέσα στο εργαστήριο:

Το βιβλίο πληροφορικής μπορείτε να το ανοίξετε οnline εδώ

Ενότητα 2, Κεφ. 7: Υλοποίηση εφαρμογών σε προγραμματιστικά περιβάλλοντα

7.1 Προγραμματισμός εφαρμογών για φορητές συσκευές

Ανάπτυξη εφαρμογών για φορητές συσκευές

To εκπαιδευτικό περιβάλλον ανάπτυξης εφαρμογών App Inventor

Διαδικασία δημιουργίας μιας εφαρμογής στο App Inventor

Quiz!!!

Φύλλα εργασίας Appinventor

Φύλλα εργασίας Appinventor

Ενότητα 3, Κεφ. 9: Διαδίκτυο, 9.3 Από τον web 1.0 στον Web x.0

Δραστηριότητες

Ενότητα 3, Κεφ. 10: Υπηρεσίες και εφαρμογές διαδικτύου

προσαρμοστικός σχεδιασμός ιστοσελίδων (Responsive web apps)

Δραστηριότητες

Δραστηριότητες για το σπίτι

Ενότητα 3, Κεφ. 11: Εισαγωγή στην HTML

11.1 Γενική εισαγωγή στην HTML

Ιστορική Αναδρομή

Βασικές ετικέτες - Δομή μιας ιστοσελίδας

Δραστηριότητα 01: Δημιουργία της πρώτης μου ιστοσελίδας

Οι ετικέτες επικεφαλίδων

Οι συνδεσμοι/υπερσύνδεσμοι (links/hyperlinks)

Δραστηριότητα 02: Χρήση επικεφαλίδων και υπερσυνδέσμων

Εργαλεία

Φύλλα εργασίας

Εισαγωγή εικόνων

Δραστηριότητα 03: Χρήση εικόνων

Εισαγωγή video

ενσωμάτωσης - embedding

Δραστηριότητα 04: Χρήση video

Eπίλυση προβλημάτων αναπαραγωγής βίντεο

CSS: καθορισμός της εμφάνισης

Φύλλα εργασίας στο CSS

Quiz!!!

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου