Μανόλης Φραγκονικολάκης - Πληροφορικός

Υλικό για μαθήματα ΕΠΑΛ

2012-01-02T02:52:00.000-08:00

Εδώ και αρκετό καιρό (3-4 χρόνια!) προγραμμάτιζα να αναρτήσω υλικό που χρησιμοποιούσα στη διδασκαλία μαθημάτων Πληροφορικής που έκανα στα ΤΕΕ και ΕΠΑΛ. Επιτέλους, με την ευκαιρία των φετινών Χριστουγεννιάτικων διακοπών, βρήκα τις 2-3 ώρες που χρειαζόταν και ... κατάφερα να καθαρίσω λίγο τον δίσκο μου από αυτό το υλικό "ιστορικής" αξίας (τα περισσότερα έγγραφα μαζεύουν σκόνες από το 2000-2005)!
Η δουλειά σε πολλές περιπτώσεις έγινε και με την συνεργασία συναδέλφων, τους οποίους δυστυχώς δεν μπορώ να αναφέρω μια που δεν θυμάμαι καθόλου πλέον που βοήθησαν!
Το υλικό αφορά tests, διαγωνίσματα, εργασίες και θέματα εξετάσεων από μαθήματα που δίδασκα στο παρελθόν στο 2ο ΤΕΕ Χανίων, το 2ο ΕΠΑΛ Χανίων και το ΕΠΑΛ Ελευθερίου Βενιζέλου. Κάποιο από το υλικό πιθανόν να μην έχει καμιά αξία, μια που αρκετά από τα μαθήματα αυτά έχουν βγει εκτός προγράμματος σπουδών.

Το υλικό αφορά τα παρακάτω μαθήματα:

Βασικές Αρχές Πληροφορικής - ΑΠ
Εισαγωγή στα Λειτουργικά Συστήματα - ΑΠ
Εμπορικές Εφαρμογές - ΒΠ
Εργασιακό Περιβάλλον - ΑΠ
Εφαρμογές ΗΥ - 1ος Κύκλος
Εφαρμογές ΗΥ - ΒκΠ
Εφαρμογές Πολυμέσων - ΒκΠ
Κοινωνία της Πληροφορίας - ΒκΠ
Λειτουργικά Συστήματα - ΒΠ
Μετάδοση Δεδομένων & Δίκτυα Υπολογιστών - ΒΠ
Μετάδοση Δεδομένων & Δίκτυα Υπολογιστών - ΒκΠ
Οργάνωση και Λειτουργία Κέντρων Πληροφορικής - ΒκΠ
Πληροφοριακά Συστήματα - ΒκΠ
Συντήρηση ΗΥ - ΒΠ
Τεχνικές Πωλήσεων - ΒΠ
Υλικό Υπολογιστών - ΑΠ
Χρήση ΗΥ - 1ος Κύκλος

και μπορείτε να το βρείτε κάνοντας ΚΛΙΚ ΕΔΩ!

Διαγραφή κωδικών από την μνήμη Chrome και Firefox

2011-12-12T02:58:00.000-08:00

Πόσες φορές δεν έχουμε κατά λάθος αποδεχτεί το μήνυμα για "Αποθήκευση του Κωδικού" μας που μας βγάζει ένας φυλλομετρητής (web browser), όταν δουλεύουμε σε κοινόχρηστους υπολογιστές, σε εργαστήρια, γραφεία και Internet Cafe. Ή πόσες φορές δεν αναρωτιόμαστε αν τελικά το κάναμε ή όχι!

Η αποθήκευση των κωδικών μας από τους φυλλομετρητές είναι μια πολύ χρήσιμη λειτουργία μια που μας διευκολύνει στην απομνημόνευση των πολλών κωδικών που πρέπει να θυμόμαστε πλέον, αλλά είναι και ένα μεγάλο κενό ασφαλείας, ειδικά όταν δουλεύουμε σε κοινόχρηστους υπολογιστές.
Τι κάνουμε λοιπόν σε αυτές τις περιπτώσεις;
Μα φυσικά διαγράφουμε τον/τους κωδικούς μας από την μνήμη του φυλλομετρητή.
Παρακάτω, ακολουθούν σύντομες οδηγίες που περιγράφουν την διαδικασία για τον Google Chrome και τον Mozilla Firefox.

Mozilla Firefox
Από το μενού που βρίσκεται πάνω αριστερά, διαλέγουμε Επιλογές-->Επιλογές

Στο παράθυρο που εμφανίζεται πατάμε το εικονίδιο Ασφάλεια και μετά το κουμπί Αποθηκευμένοι κωδικοί. Στο παράθυρο που θα μας εμφανιστεί μπορούμε να διαγράψουμε επιλεγμένα κάποιους από τους κωδικούς μας (Απομάκρυνση) ή να τους διαγράψουμε όλους (Απομάκρυνση όλων).

Google Chrome

Από το μενού που βρίσκεται πάνω δεξιά - στο κουμπί με το γαλλικό κλειδί, διαλέγουμε Εργαλεία-->Εκκαθάριση δεδομένων περιήγησης..

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

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

Για να το πετύχουμε αυτό, πατάμε το κουμπί Διαχείριση αποθηκευμένων κωδικών πρόσβασης...

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

http://sites.epal-elvenizelou.gr/appslearningcenter/your-first-days/security

Ιστότοποι, Ιστοχώροι, Δικτυακοί Τόποι, Ιστοσελίδες, Ιστολόγια... μπέρδεμα?

2011-06-08T08:34:00.000-07:00

Όλοι αυτοί οι όροι για να εκφράσουν παρεμφερείς ή επικαλυπτόμενες έννοιες! Ναι είναι ένα μικρό μπέρδεμα. Ας κάνουμε λοιπόν μια μικρή προσπάθεια να τακτοποιήσουμε τα πράγματα.
Ένας ιστότοπος, ιστοχώρος ή δικτυακός τόπος (αγγλ. web site) είναι μία συλλογή από ιστοσελίδες, εικόνες, βίντεο και άλλα ψηφιακά στοιχεία, τα οποία φιλοξενούνται στο ίδιο domain (περιοχή) του Παγκόσμιου Ιστού (δείτε http://el.wikipedia.org/wiki/Ιστότοπος και http://el.wikipedia.org/wiki/Ιστοσελίδα).

To ιστολόγιο, γνωστό συχνά με την άκλιτη ονομασία μπλογκ (blog), είναι μορφή ιστότοπου. Είναι λίστα καταχωρήσεων από την πιο πρόσφατη καταχώρηση στην παλαιότερη. Στις υπηρεσίες που παρέχει είναι και η δυνατότητα των αναγνωστών του να σχολιάζουν τις καταχωρήσεις που έχουν αναρτηθεί (δείτε http://el.wikipedia.org/wiki/Ιστολόγιο).
Ένας Ιστότοπος μπορεί να ενσωματώνει πλειάδα διαφορετικών υπηρεσιών και τύπων περιεχομένου. Από απλές στατικές ιστοσελίδες, μέχρι ιστολόγια, online συναλλαγές, κ.α. Ένα ιστολόγιο μπορεί από μόνο του να αποτελεί ιστότοπο είναι να είναι μέρος αυτού.

Υπηρεσίες που διευκολύνουν την ανάπτυξη ιστότοπων και ιστολογίων θα βρείτε αρκετές διαθέσιμες στο διαδίκτυο. Από τις ποιο δημοφιλείς (και δωρεάν) είναι οι παρακάτω:

Οδηγίες μπορείτε να διαβάσετε:

Δεν είμαι σίγουρος εάν τα παραπάνω αρκούν για να απαντηθούν όλα τα σχετικά ερωτήματα, αλλά νομίζω ότι είναι μια καλή αρχή...
:)

Γνωριμία με τους Ιστότοπους του Google (Google Sites)

2011-05-13T10:03:00.000-07:00

Οι Ιστότοποι του Google είναι μια υπηρεσία που δίνει τη δυνατότητα στους χρήστες που έχουν στη διάθεσή τους ένα google λογαριασμό να δημιουργήσουν εύκολα ένα ιστότοπο.
Η υπηρεσία αυτή συμπληρώνει το πακέτο υπηρεσιών του google (email, calendar, docs, picasa, blogger, και πολλές άλλες) και ο χρήστης μπορεί να έχει πρόσβαση σε όλες τις υπηρεσίες με τα στοιχεία του λογαριασμού του.
Ένας τρόπος για να ξεκινήσουμε να χρησιμοποιούμε τους Ιστότοπους είναι να συνδεθούμε πρώτα στο gmail μας. Εκεί, στο μενού που θα βρούμε στην κορυφή επιλέγουμε τον σύνδεσμο "Ιστότοποι".

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

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

Η διεύθυνση του ιστότοπού μας θα είναι της μορφής: https://sites.google.com/site/ONOMA/

Μπορούμε να έχουμε ιστότοπους και κάτω από δικό μας domain name (πχ http://www.ONOMA.gr) αρκεί να μην έχουμε απλό λογαριασμό google, αλλά να έχουμε ενεργοποιήσει την υπηρεσία Google apps.

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

Περισσότερα μπορούμε να βρούμε στις οδηγίες χρήσης της υπηρεσίας. Για ανάγνωση των οδηγιών χρήσης πλοηγούμαστε στην ακόλουθη διεύθυνση:

http://www.google.com/support/sites/

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

Χρήση της Υπηρεσίας Διαδικτυακής Αποθήκευσης MegaUpload

2011-05-09T03:30:00.000-07:00

Στα πλαίσια της εκπαιδευτικής διαδικασίας του Κέντρου Δια Βίου Μάθησης Από Απόσταση οι εκπαιδευόμενοι χρειάστηκε αρκετές φορές να στείλουν μέσω ηλεκτρονικού ταχυδρομείου εργασίες με μεγάλο μέγεθος (συνήθως μεγαλύτερο των 25MB που επιτρέπουν σαν επισυναπτόμενα οι περισσότερες υπηρεσίες web mail.). Οι λύσεις στο συγκεκριμένο πρόβλημα αρκετές. Μια από αυτές είναι να χρησιμοποιήσουμε μια από τις υπηρεσίες διαδικτυακής αποθήκευσης εγγράφων και να στείλουμε με email μόνο τον σύνδεσμο του εγγράφου που θα κάνουμε upload. Τέτοιες διαδικτυακές υπηρεσίες υπάρχουν αρκετές, όπως το rapidshare, το hotfiles, το megaupload, αλλά και τα google docs. Παρακάτω θα παρουσιάσουμε περιληπτικές οδηγίες για να χρησιμοποιήσετε το MegaUpload.

Αρχικά, θα χρειαστεί να πάμε στην http://www.megaupload.com/ και να κάνουμε registration.

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

Για να ανεβάσετε ένα έγγραφο από τον υπολογιστή σας αρκεί να το διαλέξετε (browse),

να γράψετε μια σύντομη περιγραφή του με λατινικούς χαρακτήρες και να το στείλετε στο διαδίκτυο (send).

Μετά το έγγραφο είναι διαθέσιμο στον filemanager της υπηρεσίας για χρήση. Επιλέγοντας το εικονίδιο με τον φάκελο θα σας παρουσιάσει την διεύθυνση (url) του εγγράφου που μπορείτε να την στείλετε σε όποιο ενδιαφερόμενο θέλετε με email για να το κατεβάσει.

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

Αν επιλέξει regular download, απλά θα χρειαστεί να περιμένει λίγο χρόνο πριν του επιτραπεί το κατέβασμα του εγγράφου.

Κόψιμο Μεγάλων Αρχείων σε Μικρότερα με τη χρήση του WinRAR

2011-05-09T02:56:00.000-07:00

Έστω ότι για παράδειγμα έχουμε ένα μεγάλο έγγραφο (π.χ. το bigvideo.avi που είναι περίπου 50ΜΒ). Αρκεί να πατήσουμε δεξί κουμπί πάνω του και να επιλέξουμε την επιλογή "Add to archive...".

Η επιλογή αυτή θα ξεκινήσει το πρόγραμμα winRar και θα μας εμφανίσει ένα παράθυρο για τις απαραίτητες ρυθμίσεις. Εκεί, στην καρτέλα "General", κάτω αριστερά, θα βρούμε τη ρύθμιση "Split to volums", όπου μπορούμε να καθορίσουμε το μέγεθος των τμημάτων.

Μετά που θα πατήσουμε ΟΚ, θα δημιουργηθούν όσα τμήματα του αρχείου χρειάζονται, τα οποία θα έχουν κατάληξη .part*.rar

Για να ξανασυνενώσουμε το έγγραφο, αρκεί να χρησιμοποιήσουμε ξανά το πρόγραμμα winRar.

Δημιουργία Εναλλακτικών Ηλεκτρονικών Διευθύνσεων στο ΠΣΔ

2011-04-18T02:52:00.000-07:00

Οι ηλεκτρονικές διευθύνσεις (διευθύνσεις email) που παρέχει το Πανελλήνιο Σχολικό Δίκτυο (ΠΣΔ) στους χρήστες του είναι συνήθως αρκετά εκτενείς, κάτι που τις κάνει δυσκολότερες στην απομνημόνευση. Για το σκοπό αυτό το ΠΣΔ δίνει τη δυνατότητα στους χρήστες του να δημιουργήσουν μέχρι δύο εναλλακτικές διευθύνσεις, οι οποίες θα λειτουργούν παράλληλα με την βασική ηλεκτρονική διεύθυνση κάθε λογαριασμού. Δηλαδή θα συνεχίζει να είναι ενεργή και η κύρια ηλεκτρονική διεύθυνση του χρήστη, αλλά και οι εναλλακτικές. Λογαριασμούς χρήστη του ΠΣΔ εκτός των εκπαιδευτικών διαθέτουν και οι σχολικές μονάδες, τα γραφεία, κ.α.

Παρακάτω παρουσιάζεται η διαδικασία με την οποία οποιοσδήποτε χρήστης του ΠΣΔ μπορεί να δημιουργήσει τις εναλλακτικές του διευθύνσεις. Σαν παράδειγμα χρησιμοποιείται ο λογαριασμός χρήστη του Υπεύθυνου ΚΕΠΛΗΝΕΤ νομού Χανίων.
Η επίσης ηλεκτρονική διεύθυνση του ΚΕΠΛΗΝΕΤ Χανίων είναι: plinet@dide.chan.sch.gr
Θέλουμε να δημιουργήσουμε τις εναλλακτικές διευθύνσεις: plinetcn@sch.gr και plinetchania@sch.gr
Αρχικά επισκεπτόμαστε την ιστοσελίδα του ΠΣΔ http://www.sch.gr

Πατάμε το σύνδεσμο Σύνδεση που βρίσκεται πάνω δεξιά

Συμπληρώνουμε Όνομα Χρήστη και Κωδικό Πρόσβασης και πατάμε Σύνδεση

Επιλέγουμε το σύνδεσμο MySch που βρίσκεται πάνω δεξιά

Επιλέγουμε τον σύνδεσμο Πίνακας Ελέγχου από το μενού αριστερά

θα χρειαστεί να ξαναβάλουμε τον κωδικό πρόσβασης

Επιλέγουμε το εικονίδιο Εναλλακτικές διευθύνσεις

Συμπληρώνουμε τις επιθυμητές εναλλακτικές διευθύνσεις και πατάμε ΟΚ

Σε περίπτωση που οι επιθυμητές διευθύνσεις δεν είναι ήδη δεσμευμένες από άλλους χρήστες του ΠΣΔ, θα είναι άμεσα διαθέσιμες προς χρήση. Σε περίπτωση που υπάρχουν ήδη σε χρήση θα πρέπει να τις αλλάξουμε μέχρι να εντοπίσουμε κάποιες πρωτότυπες!

ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ - Ενότητα 4η - Οδηγίες δραστηριοτήτων 2ης εβδομάδας

2011-04-17T07:01:00.000-07:00

Παρακάτω ακολουθούν σύντομες οδηγίες που αφορούν τις δραστηριότητες της 2ης εβδομάδας της 4ης ενότητας του προγράμματος Π4-2011-ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ του ΚΕ.ΔΒΜ.ΑΠ. (Κέντρου Δια Βίου Μάθησης Από Απόσταση).

Το αντικείμενο της συγκεκριμένης εβδομάδας αφορά:

Βασικά Θέματα Επεξεργασίας Εικόνας,Ήχου και Κινούμενης Εικόνας

Την εβδομάδα αυτή θα χρειαστεί να χρησιμοποιήσουμε διάφορες εφαρμογές επεξεργασίας πολυμέσων για να προβάλουμε και να τροποποιήσουμε πολυμεσικά αρχεία διαφόρων μορφών.
Ξεκινώντας από τον ήχο έχουμε στη διάθεσή μας στο διαδίκτυο πολλές αξιόλογες εφαρμογές για ΔΩΡΕΑΝ χρήση. Ενδεικτικά οι πιο γνωστές από αυτές είναι:

ο Windows Media Player της Microsoft, ο οποίος είναι προεγκατεστημένος στους HY με λειτουργικό windows. Σε περίπτωση που θέλουμε να τον αναβαθμίσουμε ή να τον επανεγκαταστήσουμε μετά από βλάβη (?) μπορούμε να τον βρούμε στο url http://windows.microsoft.com/el-GR/windows/downloads/windows-media-player
μια πολύ καλή εναλλακτική πρόταση είναι ο πρωτοπόρος winamp τον οποίο μπορούμε να βρούμε στο url http://www.winamp.com/
Επίσης, πολύ καλός player είναι και ο VLC (http://www.videolan.org/vlc/), όπως και
ο itunes της apple (http://www.apple.com/gr/itunes/)

Φυσικά η λίστα δεν σταματά εδώ και μπορούμε να βρούμε αρκετούς ακόμα αναζητώντας στο διαδίκτυο. Οι παραπάνω εφαρμογές είναι κατάλληλες και για προβολή video, όπως και streaming media (ραδιόφωνο, tv). Επειδή στις περιπτώσεις των video και streaming media είναι σημαντικό να έχουμε εγκαταστήσει και τους ανάλογους αποκωδικοποιητές για την απρόσκοπτη αναπαραγωγή πολλών διαφορετικών μορφών πολυμέσων θα πρότεινα να εγκαταστήσετε τον VLC ο οποίος με την εγκατάστασή του τοποθετεί στον υπολογιστή μας και μια μεγάλη συλλογή από αποκωδικοποιητές, δίνοντάς μα ςτη δυαντότητα να αναπαράγουμε σχεδόν όλες τις μορφές πολυμέσων χωρίς περιττά μηνύματα λάθους!

Ο Picture Manager (microsoft office picture manager) εγκαθείστατε μαζί με τις εκδόσεις του MS Office από την έκδοση 2003 και μετά (http://en.wikipedia.org/wiki/Microsoft_Office_Picture_Manager). Σε περίπτωση που δεν έχετε εγκαταστήσει το MS Office στον ΗΥ σας μπορείτε να χρησιμοποιήσετε άλλη εφαρμογή (δείτε παρακάτω) για τις μετατροπές που σας ζητούνται από τις δραστηριότητες. Ούτως ή άλλως η εφαρμογή Picture Manager δεν διακρίνεται για την λειτουργικότητα και την αποτελεσματικότητά της!

Σχετικά με την εφαρμογή Windows Movie Maker μπορείτε να διαβάσετε: http://en.wikipedia.org/wiki/Windows_Movie_Maker
Αν δεν είναι ήδη εγκατεστημένη στον ΗΥ σας μπορείτε να την εγκαταστήσετε από τα παρακάτω url ανάλογα με την έκδοση λειτουργικού που έχετε:

http://explore.live.com/windows-live-movie-maker?os=other

http://www.microsoft.com/windowsxp/downloads/updates/moviemaker2.mspx

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

Gimp http://www.gimp.org/
Picasa http://picasa.google.com/
Περισσότερες επιλογές μπορούμε να βρούμε: http://graphicssoft.about.com/od/pixelbasedwin/tp/freephotoedw.htm

Τελευταία έχουν αρχίσει να εμφανίζονται και online εφαρμογές για επεξεργασία φωτογραφιών. Αξίζει να δοκιμάσετε τις ακόλουθες:

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

Για την μετατροπή αρχείων ήχου από παραδοσιακά μουσικά cd (.cda) σε mp3 μπορούμε να χρησιμοποιήσουμε προγράμματα όπως το dnpoweramp το οποίο είναι εμπορικό, αλλά μπορούμε να το χρησιμοποιήσουμε για περιορισμένο χρονικό διάστημα ελεύθερα (http://www.dbpoweramp.com/), όπως το windows media player ή το audiograbber (http://www.audiograbber.org/) που είναι δωρεάν.

Τέλος, όσον αφορά την ακρόαση ραδιοφώνου από το internet, μπορούμε να χρησιμοποιήσουμε ιστοσελίδες όπως το e-radio (http://www.e-radio.gr) οι οποίες μας δίνουν την δυνατότητα να ακούσουμε τον σταθμό της επιλογής μας μέσω ενσωματωμένου player στον web browser. Εναλλακτικά, μπορούμε να πλοηγηθούμε σε ιστοσελίδες με λίστες ραδιοσταθμών και να επιλέξουμε συνδέσμους, οι οποίοι ενεργοποιούν τον προεπιλεγμένο player που έχουμε εγκαταστήσει στον ΗΥ μας και τον τροφοδοτούν με το url του σταθμού προς αναπαραγωγή (http://www.radiofono.gr/live.php).

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

αντιγράφουμε τη διεύθυνση από τον browser

εκτελούμε το vlc και επιλέγουμε "Άνοιγμα Ροής ΔεδομένωνΔικτύου"

Επικολλούμε το url και πατάμε αναπαραγωγή

μπορούμε να καταχωρήσουμε τον σταθμό στους σελιδοδείκτες

...

τον έχουμε διαθέσιμο όποτε θέλουμε!

ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ - Ενότητα 4η - Οδηγίες δραστηριοτήτων 1ης εβδομάδας

2011-04-14T09:27:00.000-07:00

Παρακάτω ακολουθούν σύντομες οδηγίες που αφορούν τις δραστηριότητες της 1ης εβδομάδας της 4ης ενότητας του προγράμματος Π4-2011-ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ του ΚΕ.ΔΒΜ.ΑΠ. (Κέντρου Δια Βίου Μάθησης Από Απόσταση).

Το αντικείμενο της συγκεκριμένης εβδομάδας αφορά:

Εισαγωγή στα Πολυμέσα
Εξοικείωση στη Σχεδίαση & Ανάπτυξη Πολυμεσικών Εφαρμογών

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

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

Σε περιπτώσεις που εντοπίσουμε εικόνες που προβάλλονται στους φυλλομετρητές (web browsers) δεν έχουμε παρά να πατήσουμε πάνω τους δεξί κουμπί και να επιλέξουμε από το μενού που θα εμφανιστεί την επιλογή "αποθήκευση εικόνας ως..." Οι τύποι των εικόνων που αποθηκεύονται με αυτό τον τρόπο και τις οποίες παρουσιάζουν οι φυλλομετρητές χωρίς επιπλέον πρόσθετα είναι: jpg, gif, png

Στις περιπτώσεις που το έγγραφο δεν είναι κατάλληλο για άμεση παρουσίαση από φυλλομετρητή, πατάμε δεξί κουμπί πάνω στον σύνδεσμο και από το εμφανιζόμενο μενού επιλέγουμε "Αποθήκευση δεσμού ως..." (tif, wmf, wav, mp3, mid, ...)

Για παράδειγμα:

για εικόνες tiff μπορούμε να αναζητήσουμε "download sample tiff file"
από τις σελίδες αποτελέσματα μπορούμε να πλοηγηθούμε στις σελίδες:

και να αποθηκεύσουμε τα έγγραφα που μας χρειάζονται.

για εικόνες wmf μπορούμε να αναζητήσουμε "download wmf images"
από τις σελίδες αποτελέσματα μπορούμε να πλοηγηθούμε στις σελίδες:

και να αποθηκεύσουμε τα έγγραφα που μας χρειάζονται.

για αρχεία ήχου wav μπορούμε να χρησιμοποιήσουμε την σελίδα:

http://www.clayloomis.com/simsong.html

για αρχεία ήχου mp3 μπορούμε να χρησιμοποιήσουμε την σελίδα:

http://www.zupiano.com/mp3s.html

για αρχεία ήχου midi μπορούμε να χρησιμοποιήσουμε την σελίδα:

http://freemidi.org/#all

Όσον αφορά αρχεία video, όπως τα mpg και avi, ένας εναλλακτικός τρόπος για να αποκτήσουμε είναι να τα κατεβάσουμε από το www.youtube.com χρησιμοποιώντας το πρόγραμμα youtube downloader.
Αυτό πρέπει αρχικά να το κατεβάσουμε και να το εγκαταστήσουμε στον υπολογιστή μας:

Έπειτα, αφού επισκεφτούμε το youtube και εντοπίσουμε το επιθυμητό video, αρκεί να αντιγράψουμε την διεύθυνση που έχει στον φυλλομετρητή και να τροφοδοτήσουμε με αυτή το πρόγραμμα youtube downloader. Προσοχή να μη παραβαίνουμε τον νόμο περί πνευματικών δικαιωμάτων.

Το πρόγραμμα youtube downloader είναι κατάλληλο και για μετατροπές video σε άλλες μορφές...

Ενδεικτικά έγγραφα από όλους τους τύπους που χρειάζεστε για τις δραστηριότητές σας μπορείτε να κατεβάσετε και από τον παρακάτω σύνδεσμο. Τα έγγραφα παρέχονται μόνο για εκπαιδευτικό σκοπό:
https://docs.google.com/leaf?id=0B3o7APobonRdNmM5NzM1YTEtYzMxNi00NTBhLTk0NDctYjYwOTgzYTQyZmM5&hl=el

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

Επίσης, παρατηρήστε και τις διαφορές στην ποιότητά τους:

κάντε κλικ για να δείτε την εικόνα σε φυσικό μέγεθος

για σύγκριση κινητών τηλεφώνων μπορούμε να αναζητήσουμε "htc wildfile vs samsung galaxy 3 review"

από τις σελίδες αποτελέσματα μπορούμε να πλοηγηθούμε στις σελίδες:

Προσθήκη Νέου Λογαριασμού Ηλεκτρονικού Ταχυδρομείου στο Microsoft Οutlook 2003

2010-11-06T08:51:00.000-07:00

Μια σελίδα σε ms word με οδηγίες για την προσθήκη νέου λογαριασμού ηλεκτρονικού ταχυδρομείου στο Microsoft Οutlook 2003. Το αρχείο rar περιέχει, εκτός του word, αρχεία .psd και .gif για να κάνετε τις δικές σας τροποποιήσεις. Για να κάνετε download το αρχείο κάντε κλικ εδώ!

Συνημμένα αρχεία στον Blogger!

2010-10-03T00:45:00.000-07:00

Πολλοί από εσάς θα έχετε προσπαθήσει να εντοπίσετε τη διαδικασία επισύναψης αρχείων σε ιστολόγιο που αναπτύσσετε στην υπηρεσία blogger της google. Το ίδιο συνέβη και σε εμένα στο παρελθόν!
Λοιπόν, η απάντησε είναι ότι δεν υποστηρίζεται μια τέτοια δυνατότητα!!!
"Μα πως είναι δυνατόν;" θα αναρωτηθήκατε φαντάζομαι...

Και όμως, το blogger δεν υποστηρίζει μια τέτοια δυνατότητα... αλλά υπάρχουν πολλές λύσεις στο πρόβλημα. Μια από αυτές και ίσως η ποιο βολική είναι να χρησιμοποιήσετε την υπηρεσία google docs.
Την υπηρεσία αυτή την χρησιμοποιείτε μάλιστα με το ίδιο όνομα χρήστη και κωδικό που έχετε για τον blogger. Αρκεί να κάνετε μεταφόρτωση του αρχείου σας στην υπηρεσία και να πάρετε τον σύνδεσμο που σας δίνει η υπηρεσία για αναφορά. Μη ξεχάσετε να κάνετε το αρχείο κοινόχρηστο!

Υλικό για σεμινάριο Ασύρματων Δικτύων

2010-10-03T00:36:00.000-07:00

Στο παρελθόν είχα αναλάβει να διδάξω σε σεμινάριο ενηλίκων το αντικείμενο "Ασύρματα Δίκτυα" (25 ώρες αν θυμάμαι καλά). Η προβλεπόμενη ύλη ήταν υπερβολική για τον χρόνο που είχα στη διάθεσή μου και ως συνήθως σε τέτοιες περιπτώσεις το ακροατήριο δεν είχε την προαπαιτούμενη υποδομή.
Για να διευκολύνω το μάθημα ανέπτυξα μια σειρά ερωτήσεων (ένα quiz) με τη χρήση του λογισμικού HotPotatoes και την οποία διαθέτω ελεύθερα προς χρήση.

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

Μπορείτε να κάνετε το quiz για τα Ασύρματα Δίκτυα πατώντας εδώ!

Οι Σελίδες μου (!)

2010-09-16T10:22:00.000-07:00

Όπως οι περισσότεροι ξέρουμε ήδη (και έχω αναφέρει και σε άλλη ανάρτηση!), το link popularity είναι από τους σημαντικότερους παράγοντες ανάδειξης μιας ιστοσελίδας ψηλά στα αποτελέσματα μιας μηχανής αναζήτησης και ειδικότερα στο google που συνήθως μας ενδιαφέρει. Για να βοηθήσω λοιπόν την αύξηση της αναγνωσιμότητας των ιστοσελίδων που έχω αναπτύξει ή συμμετείχα στην ομάδα ανάπτυξης, παραθέτω παρακάτω μια λίστα...
Είμαι σίγουρος ότι κάποιες ξεχνάω, αλλά...

Φιλικές Ιστοσελίδες

2010-09-15T11:12:00.001-07:00

Όπως οι περισσότεροι ξέρουμε ήδη, το link popularity είναι από τους σημαντικότερους παράγοντες ανάδειξης μιας ιστοσελίδας ψηλά στα αποτελέσματα μιας μηχανής αναζήτησης και ειδικότερα του "θεού" των μηχανών αναζήτησης, του google. Με αυτό το σκεπτικό, κυρίως δηλαδή για να ανεβάσω λιγάκι την αναγνωσιμότητα ιστοσελίδων φίλων, παραθέτω παρακάτω μια λίστα...
Αν σας ξέχασα, συγχωρέστε με και στείλτε μια υπενθύμιση να διορθώσω!

Δημιουργία shortcut icon (ή favicon) με το Photoshop

2010-08-17T08:38:00.000-07:00

Έχετε δει τις μικρές χαρακτηριστικές εικόνες που συνήθως εμφανίζονται αριστερά της διεύθυνσης (url) μιας ιστοσελίδας στο mozilla firefox (αλλά και στον Internet Explorer κάποιες φορές); Θα θέλατε να μάθετε και εσείς πως θα δημιουργήσετε μια ανάλογη εικόνα για την δικιά σας ιστοσελίδα; Δεν είναι δύσκολο! Οι εικόνες αυτές ονομάζονται shortcut icons ή favicons και μπορείτε να μάθετε να τις δημιουργείτε αφού διαβασετε παρακάτω...
Η shortcut icon είναι μια μικρή εικόνα που εμφανίζετε αριστερά από τη διεύθυνση (URL) μιας ιστοσελίδας στον φυλλομετρητή σελίδων (web browser). Το μέγεθός της είναι 16x16 pixels, οπότε αποτελεί σχεδιαστική πρόκληση να καταφέρουμε να δημιουργήσουμε κάτι αισθητικά ενδιαφέρον.
Για να δημιουργήσουμε ένα τέτοιο αρχείο με το photoshop χρειάζεται να εγκαταστήσουμε ένα κατάλληλο plugin, το οποίο είναι δωρεάν και μπορούμε να το βρούμε στην ιστοσελίδα της Telegraphics. Με το plugin δίνουμε τη δυνατότητα στο photoshop να διαβάζει και να αποθηκεύει αρχεία ICO (με επέκταση ico και ανάλογο format).
Για να εγκαταστήσουμε το plugin αρκεί να τοποθετήσουμε το αρχείο "ICOFormat.8bi" που θα βρούμε στο zip πακέτο που θα κατεβάσουμε στον φάκελο με τα formats αρχείων του photoshop (συνήθως ο φάκελος αυτός είναι ο C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats) και να ξαναξεκινήσουμε το photoshop.
Επειδή είναι πολύ μικρό το μέγεθος 16x16 για να δημιουργήσουμε μια καλή εικόνα είναι προτιμότερο να δουλέψουμε σε μεγαλύτερο μέγεθος (π.χ. 64x64) και ύστερα να μικρύνουμε το αποτέλεσμα. Καλό είναι να έχουμε στο μυαλό μας να δημιουργήσουμε ένα σχετικά απλό σχέδιο γιατί σε άλλη περίπτωση όταν θα αλλάξουμε το μέγεθος σε 16x16 η εικόνα μας δεν θα είναι όπως την περιμέναμε.
Για να αλλάξουμε το μέγεθος της εικόνας πριν την αποθήκευση χρησιμοποιούμε την επιλογή (menu) του photoshop Image-->Image size. Δεν πρέπει να ξεχάσουμε κατά την αποθήκευση (File->Save as...) να επιλέξουμε τύπο αρχείο (format) ICO.
Το επόμενο βήμα είναι να συνδέσουμε την εικόνα που δημιουργήσαμε με μια ιστοσελίδα. Για να το επιτύχουμε αυτό αρκεί να τοποθετήσουμε την εντολή (εττικέτα?)<link rel="Shortcut Icon" href="favicon.ico">κάπου μέσα στο <head>...</head> της ιστοσελίδας μας και φυσικά να τοποθετήσουμε την εικόνα στον ανάλογο φάκελο στον web server (στο παράδειγμά μας την εικόνα την ονομάσαμε favicon.ico, στην περίπτωση που το όνομα της εικόνας μας είναι διαφορετικό αλλάζουμε το ανάλογο σημείο της εντολής).
Για να δοκιμάσουμε το αποτέλεσμα αρκεί να φορτώσουμε την ιστοσελίδα στην οποία συνδέσαμε την shortcut icon στον φυλλομετρητή. Σε περίπτωση που αυτή (η shortcut icon) δεν φαίνεται, ας δοκιμάσουμε να κάνουμε ανανέωση (refresh) πατώντας το πλήκτρο shift για να αγνοήσει ο φυλλομετρητής την μνήμη (cash) του. Αυτό μπορούμε να το πετύχουμε τοποθετώντας και ένα ? στο τέλος της διεύθυνσης.
Εάν δεν έχετε έμπνευση για να δημιουργήσετε τη δική σας shortcut icon, μπορείτε να ρίξετε μια ματιά στο internet για ιδέες. Ένα χαρακτηριστικό site με τέτοιες προτάσεις μπορείτε να βρείτε κάνοντας κλικ εδώ!

Cascading Style Sheets - CSS

2010-07-17T08:25:00.000-07:00

Τα τελευταία χρόνια η χρήση των Cascading Style Sheets (css stylesheets) έχει καθιερωθεί ολοκληρωτικά στη μορφοποίηση ιστοσελίδων. Σαν συμπλήρωμα λοιπόν στα μαθήματα της "Ανάπτυξης Εφαρμογών Πολυμέσων" και "Προγραμματιστικά Εργαλεία για το Διαδίκτυο" (html) που γίνονται στον 2ο κύκλο πληροφορικής του ΤΕΕ ανέπτυξα ένα σχετικό εισαγωγικό μάθημα (tutorial), το οποίο είναι διαθέσιμο για ανάγνωση.

Εισαγωγή

Τι είναι τα CSS ή cascading stylesheets;

Είναι ένας εύκολος τρόπος να μορφοποιείς html σελίδες και να τις κάνεις να φαίνονται πραγματικά όμορφες... Επίσης, είναι σημαντικό ότι μπορείς να φτιάξεις μια φορά την μορφοποίηση και να την χρησιμοποιήσεις σε όσες σελίδες θέλεις...
Παραδείγματα χρήσης CSS μπορείτε να βρείτε στο web αρκετά. Από τα πιο χαρακτηριστικά site για css είναι το Zen Garden, the beauty of CSS design.

Δείτε ένα παράδειγμα ιστοσελίδας χωρίς CSS.

Δείτε την ίδια ιστοσελίδα με χρήση CSS, όπως και μια δεύτερη έκδοσή της.

Πλεονεκτήματα του CSS

Εύκολο να μορφοποιήσεις όμορφες HTML σελίδες
Αλλάζεις τη μορφοποίηση πολλών σελίδων, αλλάζοντας απλά ένα αρχείο

Μειωνεκτήματα

Οι παλιοί browsers δεν υποστηρίζουν CSS
Κάποιοι browsers δείχνουν με διαφορετικό τρόπο τις ίδες σελίδες

Πριν ξεκινήσετε να διαβάζετε παρακάτω θα χρειαστεί να έχετε τουλάχιστον ένα απλό text editor και να γνωρίζετε τουλάχιστον βασικές ένοιες HTML.

Πως βάζουμε CSS σε μια html σελίδα

Υπάρχουν 3 τρόποι να γίνει αυτό:

Τοποθέτηση μιας αναφοράς σε αρχείο που περιέχει τις εντολές:

Στην περίπτωσή μας το αρχείο ονομάζεται styles.css και βρίσκετε στον φάκελο path.

Ο τρίτος τρόπος προϋποθέτει την τοποθέτηση του παρακάτω κώδια μέσα στην ετικέτα head

Το συντακτικό των CSS

Τα CSS stylesheets χωρίζονται σε 3 μέρη:

επιλογέας{
ιδιότητα: τιμή;
}

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

Ο Επιλογέας (selector)

Ο επιλογέας καθορίζει τι αντικείμενο της ιστοσελίδας μας θα επηρεάσει η μορφοποίηση, οπότε μπορεί να είναι κάθε ετικέτα της html, όπως για παράδειγμα είναι οι ετικέτες (tags)body,a,li,tdetc.

Μπορείτε να καθορίσετε την ίδια μορφοποίηση (στυλ) για πολλούς επιλογείς (τους χωρίζετε με ,)

Αυτό γίνεται όπως στο παρακάτω παράδειγμα:

body, td, li{
background-color: #ffffff;
}

Όπως ήδη θα έχετε παρατηρήσει χρησιμοποιούμε τους χαρακτήρες '{' και '}' για να περικλείσουμε τη λίστα των στυλ για κάθε ομάδα επιλογέων.

Η ιδιότητα (property)

Η ιδιότητα καθορίζει το χαρακτηριστικό του επιλογέα που θα επηρεαστεί.Μια εκτενή λίστα ιδιοτήτων μπορείτε να βρείτε στην ιστοσελίδα w3schools (η ιστοσελίδα αυτή είναι πολύ ενδιαφέρουσα και μπορεί να σας διδάξει για αρκετά θέματα που έχουν να κάνουμε με ανάπτυξη ιστοσελίδων, αρκεί να γνωρίζετε Αγγλικά).
Μερικά παραδείγματα ιδιοτήτων για τον επιλογέαbodyακολουθούν:

body{
background-color: red;
margin: 1px;
font-size: 11px;
color: green;
}

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

Η τιμή(value)

Η τιμή καθορίζει τη μέτρηση της ιδιότητας και μπορεί να είναι αριθμοί ή λέξεις.
Οι τιμές που χρησιμοποιούμε για μεγέθη μπορούν να είναι:

pixels (px)
ποσοστά (%)
em, ένα em ...
in, ίντσες
cm, εκατοστά
mm, χιλιοστά
pt, στιγμές (points) - ένα pt είναι αντίστοιχο με το 1/72 της ίντσας.
pc, pica - ένα pc είναι ανάλογο με 12 στιγμές (pt).

Για χρώματα μπορείτε να χρησιμοποιείτε τις παρακάτω τιμές:

δεκαεξαδικές τιμές χρωμάτων σε τριάδες RGB π.χ. #FF0000.
ονόματα χρωμάτων π.χ. red
δεκαδικές τιμές χρωμάτων σε τριάδες RGB π.χ. rgb(255,0,0)
ποσοστιαίες τιμές χρωμάτων σε τριάδες RGB π.χ. rgb(100%,0%,0%)

ΠΡΟΣΟΧΗ: εάν αφήσετε κενό ανάμεσα στην τιμή και την μονάδα μέτρησης δεν θα δουλέψει (π.χ. 12 px είναι λάθος, ενώ 12px είναι σωστό).

Μη ξεχνάτε να βάζετε ερωτηματικό (;) μετά που τελειώνετε με κάθε τιμή.

Σχόλια

Είναι καλή πρακτική να γράφουμε "καθαρό" και ευανάγνωστο κώδικα. Για να το επιτύχουμε αυτό, εκτός των άλλων πρακτικών, χρησιμοποιούμε και τα σχόλια με τα οποία μπορούμε να επεξηγούμε με ελεύθερο κείμενο τον κώδικά μας.
Τα σχόλια σε css αρχεία έχουν την παρακάτω μορφή (τα περικλείουμε σε /* και */):

/* ένα σχόλιο μέσα σε αρχείο CSS */

Κλάσεις (Classes)

Έστω τώρα ότι δεν θέλετε να μορφοποιήσετε όλα τα κελιά από τους πίνακες σας με ίδιο τρόπο. Για παράδειγμα, θέλετε να δημιουργήσετε μια γραμμή πλοήγησης (navigation bar). Εδώ είναι που χρειάζονται οι κλάσεις.
Οι κλάσεις ομαδοποιούν ετικέτες σε ξεχωριστές ομάδες, οπότε μπορούμε να τους δώσουμε ξεχωριστό στυλ. Ένα παράδειγμα κλάσης είναι το παρακάτω:

.navigation{
color: #ffffff;
font-family: 'verdana';
font-size: 11px;
}

Προσέξτε ότι ο επιλογέας μιας κλάσης ξεκινάει πάντα με τελεία (.). Κατά τα άλλα ο καθορισμός στυλ σε κλάσεις είναι ίδιος όπως και γενικά σε ετικέτες.

Ο καθορισμός ότι μια ετικέτα ανήκει σε μια κλάση στον html κώδικα γίνετε όπως στο παρακάτω παράδειγμα για την ετικέταtd.

Ταυτότητες (Ids)

Τα IDs είναι σχεδόν ίδια με τις κλάσεις, μόνο που χρησιμοποιούνται μόνο μια φορά σε κάθε σελίδα. Συνήθως τα id χρησιμοποιούνται για να δημιουργούμε το στήσιμο μιας ιστοσελίδας (layout) με τη χρήση της ετικέταςdiv, όπου καθορίζουν το χρώμα και την εικόνα για το φόντο (background/background-image), το μέγεθος, τη θέση και τη στοίχιση αυτών των divs, ενώ το στυλ και το μέγεθος του κειμένου καθορίζεται με κλάσεις.
Για να καθορίσετε το στυλ ενός id κάνετε το ίδιο, εκτός του ότι χρησιμοποιείτε # στη θέση της τελείας (.).

Για παράδειγμα, στο αρχείο css θα τοποθετούσατε:

#navigation{
width: 550px;
background-color: red;
}

ενώ στον κώδικα html θα γράφατε:

<divid="navigation">
</div>

Τύποι μέσων εμφάνισης (Media Types)

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

Τύποι μέσων που μπορούμε να χρησιμοποιήσουμε είναι οι παρακάτω:

screen: για οθόνες υπολογιστών
print: για εκτυπωτές
handheld: για συσκευές χειρός
projection: για παρουσιάσεις
braille: for braille tactile feedback devices
aural: for speech and sound synthesisers
embossed: for paged braille printers
tv: για οθόνες σαν της τηλεόρασης
tty: για τερματικά
all: για όλους τους τύπους εμφάνισης

Ένα παράδειγμα χρήσης μέσων παρουσίασης σε css είναι το παρακάτω:

@media screen, handheld
{
body{ background-color: red;}
}
@media print
{
body{ background-color: white; }
}

Ψευδοκλάσεις (Pseudo Classes)

Οι ψευδοκλάσεις χρησιμοποιούνται για να καθορίζονται διαφορετικά στυλ σε επιλογείς σε διαφορετικές καταστάσεις.

Για να καθοριστεί το στυλ μιας ψευδοκλάσης χρησιμοποιούμε το παρακάτω συντακτικό:

επιλογέας:ψευδοκλάση { ιδιότητα: τιμή }

Οι ψευδοκλάσεις μπορούν να χρησιμοποιηθούν σε συνδυασμό με κανονικές κλάσεις:

επιλογέας.κλάση:ψευδοκλάση { ιδιότητα: τιμή }

Η πιο κοινή χρήση ψευδοκλάσεων είναι με συνδέσμους (ετικέταa), όπως στο παρακάτω παράδειγμα:

a:link{ color: white;} /* σύνδεσμος που δεν τον έχουμε επισκεφτεί */

a:visited{ color: black; } /* σύνδεσμος που τον έχουμε επισκεφτεί */

a:hover{ color: pink;} /* σύνδεσμος κατά τη διάρκεια που έχουμε πάνω του τον δείκτη του ποντικιού */

a:active{ color: green;} /* σύνδεσμος κατά τη διάρκεια που τον κάνουμε "κλικ" */

Η σειρά με την οποία εμφανίζονται οι παραπάνω ψευδοκλάσεις έχει σημασία για να δουλέψουν σωστά και καλό είναι να ακολουθεί το παραπάνω παράδειγμα.
Μια ακόμα χρήσιμη ψευδοκλάση είναι η :first-child που επιτρέπει τη μορφοποίηση της πρώτης εμφάνισης ενός επιλογέα σε μια σελίδα. Για παράδειγμα εάν θέλουμε η πρώτη παράγραφος σε κάθε σελίδα να έχει γράμματα με μέγεθος 20px μπορούμε να κάνουμε το παρακάτω:

p:first-child{
font-size: 20px;
}

ενώ ο κώδικάς html δεν πρόκειται να αλλάξει καθόλου και θα μοιάζει με τον ακόλουθο:

<p>
Αυτή η παράγραφος θα έχει μέγεθος γραμμάτων 20px
</p>

<p>
Οι υπόλοιπες παράγραφοι (όπως και αυτή) θα έχουν μέγεθος γραμμάτων διαφορετικό (?) από την πρώτη....</p>

Τέλος, υπάρχει και η ψευδοκλάση :focus, με την οποία δίνουμε στυλ στα αντικείμενα που έχουν την "προσοχή" (focus).

Ψευδοστοιχεία (Pseudo elements)

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

Στα ψευδοστοιχεία περιλαμβάνονται:

first-letter, καθορισμός στυλ για το πρώτο γράμμα ενός επιλογέα
first-line, καθορισμός στυλ για την πρώτη γραμμή ενός επιλογέα
:before, τοποθέτηση περιεχομένου (συνήθως μιας εικόνας) πριν ένα επιλογέα
:after, τοποθέτηση περιεχομένου (συνήθως μιας εικόνας) μετά από ένα επιλογέα

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

p {
color: black;
}

p:first-line{
color: red;
}

Οι ιδιότητες που συνδυάζονται με την :first-line είναι οι παρακάτω:

font size, color, family,
color properties
letter-spacing
Word-spacing
text-decoration
line-height
text-transform
clear
background properties
vertical-align

Το ψευδοστοιχείο :first letter είναι χρήσιμο για τη δημιουργία αρχιγραμμάτων. Στο παρακάτω παράδειγμα καθορίζουμε το πρώτο γράμμα κάθε παραγράφου να είναι μεγαλύτερο από τα υπόλοιπα (20px).

p {
font-size: 12px;
}

p:first-letter{
font-size: 20px;
}

Οι ιδιότητες που συνδυάζονται με την :first-line είναι οι παρακάτω:

background properties
color properties
font properties
padding properties
margin properties
text-decoration
border properties
vertical-align (only if 'float' is 'none')
text-transform
clear
float
line-height

Τα ψευδοστοιχεία :before και :after χρησιμοποιούνται για την τοποθέτηση εικόνων πριν και μετά από αντικείμενα της σελίδας html. π.χ. εάν θέλουμε πριν από κάθε σύνδεσμο να εμφανίζουμε μια εικόνα ο κώδικας css θα ήταν ο παρακάτω:

a:before {
content: url(image.gif)
}

Προσοχή! Τα ψευδοστοιχεία δεν λειτουργούν σε όλες τις εκδόσεις φυλλομετρητών.

"Σωστά" Γραμμένα Κείμενα

2010-07-15T09:04:00.000-07:00

Είναι σημαντικό όταν γράφουμε (ή αντιγράφουμε και τοποθετούμε) κείμενα σε μια ιστοσελίδα να φροντίζουμε να ακολουθούμε μια σειρά από κανόνες, ώστε να διατηρούμε την λειτουργική και αισθητική ποιότητα της ιστοσελίδας.

Φροντίζουμε όλα τα άρθρα που τοποθετούμε στο site να ακολουθούν ομοιόμορφο τρόπο παρουσίασης (δεν αλλάζουμε τη γραμματοσειρά και το μέγεθος των γραμμάτων που συνήθως χρησιμοποιούνται). Επίσης, αποφεύγουμε να αντιγράφουμε (copy - paste) κατευθείαν από MS WORD ή από ιστοσελίδες για να μην αντιγράψουμε και τη μορφοποίηση που υπάρχει ήδη στα κείμενα. Σε αυτές τις περιπτώσεις προτιμούμε να χρησιμοποιήσουμε ως ενδιάμεση εφαρμογή το σημειωματάριο (αντιγράφουμε από το word στο σημειωματάριο και από το σημειωματάριο στο site, ή χρησιμοποιούμε το κουμπί επικόλλησης από ms word εάν υπάρχει).
Τα σημεία στίξης τα τοποθετούμε αμέσως μετά τη προηγούμενή τους λέξη και αφήνουμε ένα κενό μετά. Η τεχνική αυτή κρατάει το σημείο στίξης μαζί με τη λέξη και αποφεύγουμε την περίπτωση να ξεκινάει μια γραμμή κειμένου με κόμμα ή τελία.
Έχουμε στο μυαλό μας ότι διαφορετικοί άνθρωποι διαθέτουν οθόνες με διαφορετικές αναλύσεις και προτιμούν διαφορετικά μεγέθη χαρακτήρων. Αφήνουμε λοιπόν στον φυλλομετρητή την ευθύνη να αλλάζει γραμμές όταν γεμίζουν και εμείς αλλάζουμε μόνο παραγράφους πατώντας enter.
Δεν κάνουμε σπατάλη στη χρήση έντονων, υπογραμμισμένων ή λοξών μια που τα χρησιμοποιούμε για να δώσουμε έμφαση, οπότε εάν το παρακάνουμε χάνουν την αξία τους.
Δεν χρησιμοποιούμε κεφαλαία σε μεγάλα τμήματα του κειμένου. Κάνουν το διάβασμα κουραστικό. Τα χρησιμοποιούμε και αυτά ΜΟΝΟ για έμφαση.
Η χρήση λίστας ή πίνακα και εικόνων στα κείμενά μας τα κάνει όμορφα και ευανάγνωστα.
Χρησιμοποιούμε ομοιόμορφο τρόπο κεφαλαιοποίησης στις επικεφαλίδες και δεν αφήνουμε πολλαπλά κενά για να αραιώνουμε λέξεις ή γράμματα.
Φροντίσουμε να χαρακτηρίζουμε τις επικεφαλίδες του κειμένου μας με το κατάλληλο "format" (π.χ. heading1, heading2, κλπ )
Σε περίπτωση που θέλουμε να έχουμε τη δυνατότητα να εφαρμόζουμε ιδιαίτερες μορφοποιήσεις σε λέξεις ή παραγράφους (χρώματα, μεγέθη, αραιώσεις, κλπ.) ζητάμε από τον διαχειριστή ιστοσελίδας να μας δημιουργήσει τα απαραίτητα "styles" και χρησιμοποιούμε αυτά.

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

Μανόλης Φραγκονικολάκης - Πληροφορικός

Υλικό για μαθήματα ΕΠΑΛ

Διαγραφή κωδικών από την μνήμη Chrome και Firefox

Ιστότοποι, Ιστοχώροι, Δικτυακοί Τόποι, Ιστοσελίδες, Ιστολόγια... μπέρδεμα?

Γνωριμία με τους Ιστότοπους του Google (Google Sites)

Χρήση της Υπηρεσίας Διαδικτυακής Αποθήκευσης MegaUpload

Κόψιμο Μεγάλων Αρχείων σε Μικρότερα με τη χρήση του WinRAR

Δημιουργία Εναλλακτικών Ηλεκτρονικών Διευθύνσεων στο ΠΣΔ

ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ - Ενότητα 4η - Οδηγίες δραστηριοτήτων 2ης εβδομάδας

ΤΕΧΝ. ΠΛΗΡΟΦΟΡΙΚΗΣ - ΕΠΙΚΟΙΝΩΝΙΩΝ - Ενότητα 4η - Οδηγίες δραστηριοτήτων 1ης εβδομάδας

Προσθήκη Νέου Λογαριασμού Ηλεκτρονικού Ταχυδρομείου στο Microsoft Οutlook 2003

Συνημμένα αρχεία στον Blogger!

Υλικό για σεμινάριο Ασύρματων Δικτύων

Οι Σελίδες μου (!)

Φιλικές Ιστοσελίδες

Δημιουργία shortcut icon (ή favicon) με το Photoshop

Cascading Style Sheets - CSS

Εισαγωγή

Πλεονεκτήματα του CSS

Μειωνεκτήματα

Πως βάζουμε CSS σε μια html σελίδα

Τοποθέτηση στην ετικέτα (tag) head των CSS ενολών:

Τοποθέτηση μιας αναφοράς σε αρχείο που περιέχει τις εντολές:

Ο τρίτος τρόπος προϋποθέτει την τοποθέτηση του παρακάτω κώδια μέσα στην ετικέτα head

Το συντακτικό των CSS

Ο Επιλογέας (selector)

Η ιδιότητα (property)

Η τιμή(value)

Σχόλια

Κλάσεις (Classes)

Ταυτότητες (Ids)

Τύποι μέσων εμφάνισης (Media Types)

Ψευδοκλάσεις (Pseudo Classes)

Ψευδοστοιχεία (Pseudo elements)

"Σωστά" Γραμμένα Κείμενα