Παρουσίαση του Pencilcode

1. To Περιβάλλον Προγραμματισμού

2. Περιγραφή περιβάλλοντος
• Διαδικτυακό περιβάλλον
• Μπορεί να το χρησιμοποιηθεί μόνο μέσα από κάποιο
browser (Firefox,chrome κλπ)
http://pencilcode.net
• συνδυάζει δύο περιβάλλοντα,
– περιβάλλον με πλακίδια (τύπου Scracth)
– περιβάλλον προγραμματισμού με γραμμές κώδικα.
• Τα περιβάλλοντα αυτά είναι αλληλεπιδραστικά.

3. Περιγραφή περιβάλλοντος

4. Περιγραφή περιβάλλοντος
Draw, Jam, Imagine:
περιέχουν παραδείγματα έτοιμα προς εκτέλεση

5. Περιγραφή περιβάλλοντος
Get Creative:
 έτοιμα παραδείγματα
 μπορείτε να ξεκινήσετε να δημιουργήσετε το δικό σας
πρόγραμμα.

6. Περιγραφή περιβάλλοντος

7. Περιγραφή περιβάλλοντος

8. Περιγραφή περιβάλλοντος

9. Λογαριασμοί χρηστών
 Προσωπικός λογαριασμός
 Αποθηκεύονται τα προγράμματα
 Δεν υπάρχει δυνατότητα ανάκτησης
λογαριασμού

10. Λογαριασμοί χρηστών
 Έχουμε πρόσβαση σε κάθε πρόγραμμα
μέσω url
Π.χ. το program του χρήστη noname
είναι:
http://noname.pencilcode.net/program

11. Εισαγωγή στο περιβάλλον

12. Εισαγωγή στο περιβάλλον
• Ο κώδικας συμπληρώνεται με τη
μεταφορά των πλακιδίων στο μεσαίο
τμήμα της οθόνης.
• Στο δεξιά τμήμα εμφανίζεται το
αποτέλεσμα της εκτέλεσης του κώδικα.
• Η εμφάνιση των αποτελεσμάτων γίνεται
πατώντας τον κύκλο με το βελάκι στο
μέσον της οθόνης (Play)

13. Εισαγωγή στο περιβάλλον

14. Υποστηριζόμενες γλώσσες Προγραμματισμού
 CoffeeScript, μια γλώσσα τύπου JavaScript με
απλοποιημένη σύνταξη.
 HTML, Η βασική HyperText Markup Language για
το διαδίκτυο. .
 JavaScript, Η βασική γλώσσα που χρησιμοποιούν
οι φυλλομετρητές (browsers).
 CSS, Δημιουργία γραφικών στο web.
 jQuery, βιβλιοθήκη για τη δημιουργία
διαδραστικών σελίδων στο web
 jQuery-turtle, επέκταση της jQuery για την
απλοποίηση γραφικών

15. Το πάνελ ελέγχου

16. Κάποια παραδείγματα

17. Δραστηριότητα
• Δοκιμάστε να ολοκληρώσετε τα σχέδια
– Draw a Snowkid
– Straight Line Shapes
– Symmetric Drawings