Καλές γιορτές σε όλους

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

Ο Στάθης Παναγιοτώπουλος μιλάει στο wlearn.gr...

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

 

Link προς το wlearn.gr στην ιστοσελίδα w3c.org

Στην ιστοσελίδα του w3c.org υπάρχουν αναρτημένα links προς ιστοσελίδες με Μαθήματα CSS που είναι γραμμένα σε διάφορες γλώσσες εκτός αγγλικών (Non-english CSS tutorials). Με πολύ χαρά και τιμή για το wlearn.gr,  το w3c πρόσθεσε τα Μαθήματα CSS του wlearn.gr στην λίστα αυτή: http://www.w3.org/Style/CSS/learning#non-english

Στην εν λόγο σελίδα η καταχώρηση των Μαθημάτων CSS του wlearn.gr εμφανίζεται ακριβώς έτσι:

Ελληνικά/Greek

• Μαθήματα CSS by Ακης Καργιοφύλλης

Το W3C είναι ο οργανισμός ο οποίος ανάπτυξε και διαχειρίζεται τα πρότυπα της HTML, της XHTML και της CSS.

Κάθε μέρα και από ένα (τουλάχιστον) νέο στα 'Νέα στο Διαδίκτυο'

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

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

Ελπίζω να μην δω πάλι εκείνο το μήνυμα

Αυτήν την στιγμή που γράφω παρατηρώ μια φοβερή αστάθεια στον server που φιλοξενεί το wlearn.gr. Την μια στιγμή φορτώνεται κανονικά το site και την άλλη στιγμή εμφανίζεται μια λευκή οθόνη. Ελπίζω να μην δούμε πάλι το μήνυμα των αλβανών hacker! Ελπίζω...

Η Σειρά Μαθημάτων HTML5 και οι αλλαγές στο wlearn.gr

Είμαι πολύ χαρούμενος που επιτέλους ολοκλήρωσα τα Μαθήματα HTML5.

Ο λόγος που άργησα να ανεβάσω την νέα Σειρά είναι ότι παράλληλα με την σχεδίαση των Μαθημάτων, διόρθωνα, πρόσθετα και άλλαζα διάφορα κομμάτια του wlearn.gr. Πιο συγκεκριμένα:

- άλλαξα της εμφάνιση των παραδειγμάτων μέσα στα Μαθήματα. Κάθε παράδειγμα έχει τίτλο, μια περιγραφή εκεί που χρειάζεται και το κουμπί 'Δοκίμασε το' το οποίο οδηγεί στην εφαρμογή 'Δοκίμασε το' όπου μπορείτε να πειραματιστείτε με τον κώδικα του παραδείγματος

- άλλαξα τελειώς την εφαρμογή 'Δοκίμασε το'. Κατάργησα τα frames που δεν υποστηρίζονται στην HTML5 και πλέον το αποτέλεσμα του κώδικα εμφανίζεται μέσα σε ένα iframe (περισσότερα για την ετικέτα <iframe>). Με την αλλαγή αυτή άλλαξε όλη η δομή του 'Δοκίμασε το' και η προσθήκη ενός παραδείγματος έγινε πολύ εύκολη υπόθεση για μένα, πράγμα που σημαίνει περισσότερα παραδείγματα καταναλώνοντας πολύ λιγότερο χρόνο. Πάρτε μια γεύση απο το νέο Δοκίμασε το

- ανανέωσα την σελίδα με τα λεπτομερή στοιχεία των ετικετών και πρόσθεσα την παράγραφο ΄Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5΄ όπου συνοψίζω τις διαφορές μεταξύ της HTML4.01 και της HTML5. Πάρτε μια γεύση απο την νέα εμφάνιση της σελίδας με τα λεπτομερή στοιχεία της ετικέτας <table>

Αυτά με τις αλλαγές και την νέα Σειρά Μαθημάτων που ελπίζω να βρείτε ευκολοδιάβαστη

Καλή πλοήγηση

Η επίθεση στον server και η γρήγορη αποκατάσταση

Εχθές (20 Νοεμβρίου) hackers χτύπησαν τον server στον οποίον φιλοξενείται το wlearn.gr με αποτέλεσμα να μείνει offline από τις περίπου 7 το απόγευμα μέχρι τα ξημερώματα της Κυριακής. Ευτυχώς τα παιδιά που έχουν τον server αντέδρασαν γρήγορα και έτσι σήμερα το wlearn.gr λειτουργεί κανονικά.

Αλβανοί hackers επιτέθηκαν στον server που βρίσκεται το wlearn.gr

Αλβανοί hackers επιτέθηκαν στον server που βρίσκεται το wlearn.gr, με αποτέλεσμα το site να μην λειτουργεί. Ελπίζω οι κάτοχοι του server να δράσουν γρήγορα και να αποκαταστήσουν το προβλημα.

Όπως θα προσέξατε το blog δεν εμφανίζεται σωστά. Οφείλεται στο πρόβλημα του server καθώς εισάγει css και εικόνες απο εκεί.

Ζητώ συγνώμη απο τους επισκέπτες του wlearn.gr. Ελπίζω να αποκατασταθεί γρήγορα το πρόβλημα.

Πριν την δημοσίευση των Μαθημάτων HTML5, Μέρος 2ο

Η ετικέτα <audio>


Μια από τις ριζοσπαστικές αλλαγές που έφερε η HTML5 είναι ο τρόπος που προσθέτουμε βίντεο και audio στις σελίδες.

Μέχρι σήμερα, όπως στα βίντεο έτσι και στα audio, δεν υπήρχε στάνταρ τρόπος με τον οποίον τα προσθέταμε στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plug-ins από τους χρήστες. Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέτουμε audio στις σελίδες, χρησιμοποιώντας την ετικέτα <audio>

Προς το παρόν τρεις τύποι audio υποστηρίζονται από την HTML5:
- Ogg Vorbis
- MP3 και
- WAV

Ιδιότητες της ετικέτας <audio>

Ιδιότητα	Τιμή	Περιγραφή
autoplay (HTML5)	autoplay	η αναπαραγωγή του audio θα αρχίσει μόλις ολοκληρωθεί η φόρτωση του
controls (HTML5)	controls	εμφανίζει τα κουμπιά ελέγχου στο audio, όπως το play, stop κτλ.
loop (HTML5)	loop	η αναπαραγωγή του audio, κάθε φορά που τελειώνει, θα αρχίζει από την αρχή
preload (HTML5)	preload	το audio θα φορτωθεί (load) όταν η σελίδα φορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα autoplay
src (HTML5)	URL	Το URL του audio

Παραδείγματα

Η πιο απλή σύνταξη της ετικέτας

<audio src="beach3.wav"></audio>

Δοκίμασε το

Προσθήκη ενός audio το οποίο θα αρχίσει να παίζει όταν φορτωθεί

<audio src="beach3.wav" autoplay="autoplay" controls="controls"></audio>

Δοκίμασε το

Προσθέτουμε audio με κουμπιά ελέγχου και άλλες ιδιότητες

<audio src="beach3.wav" controls="controls" loop="loop"></audio>

Προσθήκη ενός audio το οποίο θα εμφανίζει τα κουμπιά ελέγχου και θα συνεχίζει να παίζει από την αρχή κάθε φορά που φτάνει στο τέλος

Δοκίμασε το

Η ετικέτα source

Η ετικέτα <source> προσθέσει πολλά media στην σειρά, είτε βίντεο, είτε audio. Έτσι όταν η αναπαραγωγή ενός media τελειώνει αρχίζει η αναπαραγωγή του επόμενου media. Η ετικέτα τοποθετείται μέσα στις ετικέτες <video> και <audio>:

Προσθήκη δύο audio στην σειρά

<audio controls="controls">
  <source src="beach3.wav" type="audio/wav" />
  <source src="beach2.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>

Δοκίμασε το

Πριν την δημοσίευση των Μαθημάτων HTML5, Μέρος 1ο

Η ετικέτα <video>


Μια από τις ριζοσπαστικές αλλαγές που έφερε η HTML5 είναι ο τρόπος που προσθέτουμε βίντεο και audio στις σελίδες.

Μέχρι σήμερα δεν υπήρχε στάνταρ τρόπος με τον οποίον παρουσιαζόταν τα βίντεο στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plug-ins από τους χρήστες, όπως το flash. Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέτουμε βίντεο στις σελίδες, χρησιμοποιώντας την ετικέτα <video>

Προς το παρόν δύο τύποι βίντεο υποστηρίζονται από την HTML5:
- ο τύπος Ogg (ogg αρχεία με το Thedora video codec και το Vorbis audio codec) και
- ο τύπος MPEG4 (MPEG 4 αρχεία με το H.264 video codec και το AAC audio codec).

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

Ιδιότητες της ετικέτας <video>

Ιδιότητα	Τιμή	Περιγραφή
autoplay (HTML5)	autoplay	Αν υπάρχει η ιδιότητα αυτή, η αναπαραγωγή του βίντεο θα αρχίσει μόλις ολοκληρωθεί η φόρτωση του
controls (HTML5)	controls	Η ύπαρξη της ιδιότητας εμφανίζει τα κουμπιά ελέγχου στο βίντεο, όπως το play, stop κτλ.
height (HTML5)	pixels	Ορίζει το ύψος του βίντεο
loop (HTML5)	loop	Αν υπάρχει η ιδιότητα, η αναπαραγωγή του βίντεο, κάθε φορά που τελειώνει, θα αρχίζει από την αρχή
preload (HTML5)	preload	Αν υπάρχει η ιδιότητα αυτή, το βίντεο θα φορτωθεί (load) όταν η σελίδα φορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα autoplay
src (HTML5)	URL	Ορίζει το url του βίντεο
width (HTML5)	pixels	Ορίζει το μήκος του βίντεο

Παραδείγματα

Μια απλή σύνταξη της ετικέτας

<video src="movie.ogg">
</video>

Εμφανίζουμε βίντεο με συγκεκριμένες διαστάσεις

<video src="movie.ogg" width="300" height="200">
</video>

Εμφανίζουμε το βίντεο με συγκεκριμένες διαστάσεις με τα κουμπιά ελέγχου

<video src="movie.ogg" width="300" height="200" controls="controls">
</video>

Εμφανίζουμε βίντεο με συγκεκριμένες διαστάσεις και κάποιες άλλες ιδιότητες

<video src="movie.ogg" width="300" height="200" controls="controls" autoplay="autoplay" loop="loop">
</video>

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

Η ετικέτα <source>

Η ετικέτα <source> προσθέσει πολλά media στην σειρά, είτε βίντεο, είτε ήχους. Έτσι όταν η αναπαραγωγή ενός media τελειώνει αρχίζει η αναπαραγωγή του επόμενου media. Η ετικέτα τοποθετείται μέσα στις ετικέτες <video> και <audio>.

Το παρακάτω παράδειγμα προσθέτει 3 βίντεο στην σειρά:

Τίτλος

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie2.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

Διορθώσεις στα Μαθήματα HTML

Γεια σας και πάλι...

η σχεδίαση των μαθημάτων HTML5 συνεχίζεται με ταχείς ρυθμούς, αν και κάποιες υποχρεώσεις που προέκυψαν στην καθημερινή μου ζωή με άφησαν 4-5 ημέρες μακριά από την νέα Σειρά Μαθημάτων

Η Σειρά Μαθημάτων HTML ήταν η πρώτη Σειρά Μαθημάτων που ανέβασα στο wlearn.gr. Με αφορμή την νέα Σειρά Μαθημάτων HTML5, σαρώνω όλες τις ενότητες των μαθημάτων HTML και διορθώνω κάποια λάθη που δεν τα είχα εντοπίσει μέχρι τώρα, αλλά και προσθέτω σημειώσεις στις οποίες μπορείτε να βλέπετε τις διαφορές μεταξύ του προτύπου HTML4.01 και του HTML5 και τονίζοντας την σωστή σύνταξη του κώδικα στο πρότυπο HTML5. Επίσης προσθέτω περισσότερα παραδείγματα ώστε να γίνετε 100% κατανοητό το περιεχόμενο κάθε ενότητας.

Ολοκληρώνοντας τις αλλαγές αυτές, είμαι βέβαιος ότι τα μαθήματα HTML, XHTML HTML5 και CSS θα αποτελέσουν το απόλυτο ελληνικό tutorial για αυτές τις τεχνολογίες.

Καλά να περάσετε ότι κι' αν κάνετε σήμερα...

Παραδείγματα και η εφαρμογή 'Δοκίμασε το'

Γεια σε όλους.

Κάνω μια παύση από την σχεδίαση της Σειράς Μαθημάτων HTML5 και γράφω αυτό το post σχετικά με τα παραδείγματα μέσα στα μαθήματα

Η τρέχουσα εμφάνιση των παραδειγμάτων είναι ένα κίτρινο πλαίσιο μέσα στο οποίο γράφεται ο κώδικας του παραδείγματος και κάτω από αυτό βρίσκεται το link Δοκίμασε το οποίο οδηγεί στο παράθυρο όπου μπορεί κάποιος να δοκιμάσει τον κώδικα και το αποτέλεσμα αυτού στον browser.

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

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

Επίσης θέλω να αλλάξω και την εφαρμογή Δοκίμασε το η οποία λειτουργεί με frames τα οποία έχουν αφαιρεθεί απο το πρότυπο HTML5. Έτσι θα πρέπει να πάω σε λύση iframe.

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

See ya!

Ενδιαφέροντα links

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

Αν θέλετε μπορείτε να μου γράψετε εδώ τις ιστοσελίδες που μπαίνετε συχνότερα ή που σας προκάλεσαν ενδιαφέρον

Μαθηματα HTML5

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

Ποιο συγκεκριμένα, αφαιρεί κάποιες ετικέτες που είτε δεν χρησιμοποιήθηκαν πολύ είτε δεν ταίριαζαν στο νέο πρότυπο, ενώ προσθέτει νέες η οποίες εισάγουν πολύ εύκολα στις σελίδες λειτουργίες όπως, βίντεο και ήχο απλοποιώντας κατά πολύ τον τρόπο που μέχρι σήμερα τα προσθέταμε στις ιστοσελίδες μας. Επίσης προσθέτει την δυνατότητα σχεδίασης γραφικών (animation ή μη) με χρήση JavaScript κάνοντας, κατά την γνώμη μου, τα αρχεία flash λιγότερο αναγκαία. Σημαντικές αλλαγές έχουν γίνει και στις φόρμες, όπου προστέθηκαν νέες ετικέτες και ιδιότητες για να μπορούν να υλοποιηθούν οι σύγχρονες ανάγκες των χρηστών του internet, όπως το αυτόματο validation των δεδομένων μιας φόρμας, η ασφάλεια στην αποστολή των δεδομένων και άλλα πολλά.

Η σχεδίαση των Μαθημάτων HTML5, δημιούργησε αναπόφευκτα την ανάγκη να ξανά γράψω από την αρχή τα λεπτομερή στοιχεία των ετικετών προσαρμόζοντας τις ετικέτες στο νέο πρότυπο, καθώς αρκετές ιδιότητες που υποστήριζε η HTML 4.01 έχουν αφαιρεθεί, ενώ άλλες νέες ιδιότητες έχουν προστεθεί. Η παράγραφός με τίτλο Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5 περιγράφει τις διαφορές που έχει επιφέρει το νέο πρότυπο, τόσο στην λειτουργία όσο και στις ιδιότητες τους, συγκριτικά με αυτά που ίσχυαν στην HTML 4.01. Δείτε τα λεπτομερή στοιχεία της ετικέτας <a> για να δείτε στην πράξη τα παραπάνω.

Θα ακολουθήσουν και άλλα posts σχετικά με την HTML5, όπου θα δημοσιεύω μικρά κομμάτια από τα μαθήματα που βρίσκονται ακόμη στην φάση του σχεδιασμού.

Το πρώτο άρθρο του blog

Χαιρετώ τους αναγνώστες του wlearn.gr.

Το wlearn.gr βρίσκεται στο internet από τον Απρίλιο του 2005. Τα πέντε και μισό αυτά χρόνια προσπαθώ να δημιουργώ μαθήματα φιλικά προς αυτούς που έρχονται για πρώτη φορά σε επαφή με το αντικείμενο που ασχολείται το κάθε μάθημα. Με πολύ χαρά βλέπω αρκετούς καθηγητές Γυμνασίων και Λυκείων να προσθέτουν το περιεχόμενο του wlearn.gr σαν ύλη μαθημάτων στα σχολεία. Με χαρά επίσης βλέπω όλο και περισσότερες αναφορές από άλλα blogs και forums σε περιεχόμενα του wlearn. Σύμφωνα με τα στατιστικά του server που φιλοξενεί το site, εκατοντάδες είναι αυτοί που μάθανε HTML, CSS και XHTML διαβάζοντας τις καλά οργανωμένες ενότητες των μαθημάτων του wlearn.gr.

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

Μετρώντας 3 σειρές μαθημάτων (που πολύ σύντομα θα γίνουν 4), δύο σημαντικά αφιερώματα (ένα για το email και ένα για τις εφαρμογές καταχώρισης αποδείξεων) αλλά και πολλά φρέσκα νέα από τον χώρο του Internet, έφτασε η ώρα να αλλάξει η μονόδρομη επικοινωνία του επισκέπτη με το wlearn και να αναβαθμιστεί σε αμφίδρομη.

Παρακάτω σας ανακοινώνω μερικούς από τους λόγους που με οδήγησαν να δημιουργήσω αυτό το blog:

- για να ενημερώνω τα projects του wlearn που "τρέχουν", αλλά και τα μελλοντικά σχέδια που πρόκειται να υλοποιήσω στο site

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

- να μοιράζομαι μαζί σας σκέψεις, εντυπώσεις από την καθημερινή πλοήγηση μου στο Internet και άλλα πολλά που δεν μπορώ να γράψω στην επίσημη ιστοσελίδα του wlearn.gr.

Σας εύχομαι λοιπόν... καλή πλοήγηση