Δευτέρα 29 Νοεμβρίου 2010

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


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


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


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

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

Πέμπτη 25 Νοεμβρίου 2010

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


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

Κυριακή 21 Νοεμβρίου 2010

Η Σειρά Μαθημάτων 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. Ελπίζω να αποκατασταθεί γρήγορα το πρόβλημα.

Πέμπτη 18 Νοεμβρίου 2010

Πριν την δημοσίευση των Μαθημάτων 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>

Δευτέρα 15 Νοεμβρίου 2010

Πριν την δημοσίευση των Μαθημάτων 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>

Σάββατο 13 Νοεμβρίου 2010

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

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

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

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

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

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

Δευτέρα 8 Νοεμβρίου 2010

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

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

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

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

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

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

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

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

See ya!

Δευτέρα 1 Νοεμβρίου 2010

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

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

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