Editors Picks

Παρασκευή 14 Απριλίου 2017

60 online πηγές για να μάθετε προγραμματισμό δωρεάν

Αν είστε εντελώς καινούριοι στον κόσμο του web design και του web development, θα ήταν καλό να ξεκινήσετε να εξοικειώνεστε με τον προγραμματισμό χρησιμοποιώντας τις δωρεάν πηγές που μπορείτε να βρείτε online. Με αυτό τον τρόπο, θα ανακαλύψετε τις σας αρέσει (και κυρίως τι δεν σας αρέσει) πριν επενδύσετε οικονομικά σε κάποιο συγκεκριμένο σύνολο μαθημάτων.
Η Laurence Bradford του SkillCrush έφτιαξε για το The Muse μια λίστα με δωρεάν online πηγές για web design & development. Η λίστα αυτή αποτελεί ένα συνονθύλευμα μαθημάτων, γραπτών tutorial, καναλιών στο youtube, blog, ebook, online κοινοτήτων, ακόμη και εργαστηρίων.

Γενικά
1. Codecademy
Τι θα μάθετε: HTML and CSS, JavaScript, PHP, Python, Ruby, Angularjs, The Command Line
2. CodewarsΤι θα μάθετε: CoffeeScript, JavaScript, Python, Ruby, Java, Clojure, Haskell
3. Coursera
Τι θα μάθετε: Πολλά περισσότερα από βασικές γνώσεις προγραμματισμού
4. edX
Τι θα μάθετε: Java, C#, Python κ.α.
5. Free Code Camp
Τι θα μάθετε: HTML, CSS, Bootstrap, JavaScript, Databases, DevTools, Node.js, React.js, and D3.js
6. GA Dash
Τι θα μάθετε: HTML, CSS, JavaScript και responsive design
7. Khan Academy
Τι θα μάθετε: Πολλά (Η αρχική σελίδα τους αναγράφει "You can learn anything")
8. MIT OpenCourseware
Τι θα μάθετε: Πολλά (online Βιβλιοθήκη για οποιοδήποτε μάθημα διδάσκεται, χωρίς να απαιτείται η δημιουργία λογαριασμού για πρόσβαση)
9. The Odin Project
Τι θα μάθετε: HTML, CSS, JavaScript και jQuery, Ruby programming, Ruby on Rails
10. Udacity
Τι θα μάθετε: Πολλά (κάποια μαθήματα παρέχονται δωρεάν, ωστόσο άλλα έχουν κόστος)
11. Udemy
Τι θα μάθετε: web development, programming, data science (τα μαθήματα δημιουργούνται από οποιονδήποτε, οπότε διαβάστε τις κριτικές πριν επιλέξετε κάποιο)
12. The Code Player
Τι θα μάθετε: HTML5, CSS3, Javascript, Regex, JQuery

YouTube Channels
13. Coder’s GuideΤι θα μάθετε: HTML, CSS, JavaScript, Bootstrap, WordPress, iOS και Android
Subscribers: 44,215
14. DevTips
Τι θα μάθετε: HTML, CSS, responsive design, development advice
Subscribers: 82,907
15. LearnCode.academy
Τι θα μάθετε: Sublime Text, Responsive Design, Node.js, Angular.js, Backbone.js, deployment strategies
Subscribers: 154,590
16. thenewboston
Τι θα μάθετε: Android development, C programming, MySQL, Python (πάνω από 4,000 video)
Subscribers: 1,131,977
Δείτε εδώ μια λίστα με 33 ακόμη κανάλια.

Blog
17. A List Apart
Πολλοί συντάκτες. Γράφουν βιβλία, διοργανώνουν event και τρέχουν ένα υπέροχο blog για development & design. Δείτε εδώ όλα τα σχετικά με το coding θέματα.
18. CSS-Tricks
CSS, Sass, JavaScript, PHP κ.α.. Εξερευνήστε τόνους πηγών και δείτε το αλμανάκ τους.
19. David Walsh
Ανήκει στον David Walsh ( senior developer στη Mozilla), ωστόσο γράφουν κι άλλοι εκεί. Tutorial, how-to, demo κ.ά.
20. Scotch.io
Angular, Node.js, Laravel, Sublime Text κ.ά.
21. SitePoint
Έχουν πολλούς συντάκτες και δημοσιεύουν συχνά. Τα θέματα ποικίλουν από HTML σε CSS μέχρι την επιχειρηματικότητα.
22. Tuts+
Πάρα πολλά δωρεάν εκπαιδευτικά video, αλλά και επί πληρωμή επιλογές για κανονικά courses. Δημοσιεύει επίσης ebook.

The Command Line
23. Command Line Power User
Free video series για μέσο επίπεδο και όχι αρχάριους.
24. Conquering the Command Line
Δωρεάν online βιβλίο του Mark Bates.
25. Learn Command Line the Hard Way
Δωρεάν online βιβλίο του Zed Shaw.

Git and GitHub
26. Try Git
Διαδραστική σειρά προκλήσεων για να πειραματιστείτε με το Git. Δημιουργία του Code School.
27. Git Immersion
Οδηγός που σας διδάσκει τα βασικά του Git. Μπορείτε να δημιουργήσετε τα δικά σας project.

HTML and CSS
28. Skillcrush’s Coding Bootcamp
Ενδείκνυται για πλήρως αρχάριους. Θα καταλάβετε τι σημαίνει να δουλεύει κανείς στην τεχνολογία και θα έχετε την ευκαιρία να γράψετε τις δικές σας σειρές προγραμματισμού.
29. Learn CSS Layout
Θα μάθετε τα βασικά της CSS που χρησιμοποιούνται για τη δημιουργία της διάταξης μιας ιστοσελίδας.Είναι προτιμότερη για όσους έχουν βασικές γνώσεις HTML και CSS.
30. Marksheet.io
Για αρχάριους. Χωρίζεται σε τέσσερα κεφάλαια: The web, HTML5, CSS3 και Sass. Είναι κάτι σαν ένα online βιβλίο.
31. Mozilla Developer Network
HTML και CSS (επίσης JavaScript). Περιλαμβάνει tutorial για ανθρώπους όλων των επιπέδων, από αρχάριους έως advanced.
32. HTML5 Dog
Tutorial για αρχάριους στην HTML. (Προσφέρουν και intermediate και advanced επίπεδο)

JavaScript
33. Eloquent Javascript
Online βιβλίο
34. Javascript.com
Δημιουργία του Code School. Γρήγορα και εύκολα για εντελώς αρχάριους.
35. JavaScript for Cats
Μοιάζει με μονοσέλιδο διαδικτυακό βιβλίο χωρισμένο σε ενότητες.
36. Learn JS
Πλοηγηθείτε στα μαθήματα, γράψτε στο παράθυρο που εμφανίζεται στο τέλος. Δημιουργία εκείνων που δημιούργησαν και το learnpython.org.
37. NodeSchool
Εργαστήρια και event σε όλο τον κόσμο και ισχυρή web παρουσία.
38. That JS Dude
Ιστοσελίδα που διδάσκει Javascript (μέσω video και κειμένων). Του@mdkhan005.
39. The Node Beginner Book
Γραμμένο από το Manuel Kiessling, το βιβλίο εστιάζει σε ανθρώπους που έχουν κάποια εμπειρία σε άλλες γλώσσες προγραμματισμού. Αν και η δωρεάν έκδοσή του online είναι μικρότερη από το πλήρες βιβλίο, διδάσκει αρκετά για τη Node.

WordPress
40. WordPress.tv
Εγγραφές από συνέδρια του WoldCamp παγκοσμίως. Created by Automattic.
41. WPBeginner
Ιστοσελίδα για αρχάριους.
Python
42. A Byte of Python
Δωρεάν online βιβλίο για αρχάριους.
43. LearnPython.orgΔιαδραστικό online tutorial.
44. Learn Python The Hard Way (Website)
Το βιβλίο έχει κόστος αλλά η ιστοσελίδα είναι free.
45. Python Spot
Για αρχάριους και μεσαίου επιπέδου.
46. Python Tutorial for Beginners: Learn in 7 Days
20 ενότητες για αρχάριους.

Ruby
47. Learn Ruby the Hard Way
Free HTML version του βιβλίου online.
48. Rails For Zombies
Διαδραστικός τρόπος για να μάθετε Ruby on Rails κατευθείαν στο browser σας.
49. Rails Tutorial
Βιβλίο του Michael Hartl, που αποτελείται από 12 κεφάλαια.Διαβάστε το δωρεάν online.
50. RubyMonk
Εντελώς δωρεάν, βασίζεται σε διαδραστικά tutorial.
51. Try Ruby
Και αυτό από το Code School. Θεωρείται καλύτερη επιλογή για αρχάριους.

Databases
52. Learn SQL the Hard Way
Του Zed Shaw. Free online βιβλίο που περιλαμβάνει 33 ασκήσεις. Στο τέλος θα καταλαβαίνετε την SQLκαι πώς να σχεδιάσετε data.
53. MongoDB University
Τα μαθήματα είναι σε μορφή video. Περιλαμβάνει επίσης quiz και ασκήσεις.
54. MySQLtutorial.org
Προσφέρει μεγάλη ποικιλία σε MySQL tutorial.
55. SQL for Web NerdsΔωρεάν ψηφιακό βιβλίο του καθηγητή του MIT, Philip Greenspun. Data modeling, simple queries, transactions, trees κ.α..
56. Vertabelo
Δωρεάν πλατφόρμα που προσφέρει τρία διαφορετικά courses: SQL Queries, Operating on Data in SQL και Creating Tables in SQL (προσεχώς).

Design/User Experience
57. HackDesign
50 μαθήματα, όλα από διαφορετικό εκπαιδευτή. Στη θεματολογία περιλαμβάνονται typography, interaction design, front-end design.
58. UX Apprentice
Τέλειο για αρχάριους. Τρία βασικά μέρη: discovery, strategy και design.
59. UXPin
Περιλαμβάνει μεγάλη ποικιλία σε δωρεάν UX βιβλία που διατίθενται στην ιστοσελίδα. Το μόνο που χρειάζεται για να έχετε πρόσβαση στο υλικό είναι το email σας.

Online Communities
60. CodeBuddies
Φοβερό για όσους θέλουν να μάθουν μαζί με άλλους ή να κάνουν προγραμματισμό σε ζευγάρια.
61. CodeNewbie
Ποικιλία σε εργαλεία για αρχάριους, συμπεριλαμβανομένων της κοινότητας Slack, όπου μπορείτε να θέσετε τα ερωτήματά σας, Twitter chat κάθε Τετάρτη και ένα εβδομαδιαίο podcast.
62. Newbie Coder Warehouse
Το Newbie Coder Warehouse είναι το Facebook group των 2,200+ self-taught coders (and counting!) της αρθρογράφου, όπου μπορείτε να κάνετε ερωτήσεις και να συνδεθείτε με άλλους ανθρώπους.

Πηγή: The Muse

Τρίτη 26 Μαΐου 2015

Yπάρχουν πολλοί λόγοι για τους οποίους θα θέλατε να ελέγξετε αν κάποιος χρησιμοποιεί το ασύρματο δίκτυο σας (Wi-Fi) χωρίς άδεια...
Μπορεί να έχει ήδη συμβεί και το καταλαβαίνετε συνήθως από την ταχύτητα της σύνδεσης σας που αρχίζει να «σέρνεται.» Φυσικά, θα πρέπει να αναφέρουμε και τις συνέπειες για την ασφάλεια των δεδομένων σας, καθώς ένας έμπειρος και κακόβουλος χρήστης μπορεί με κάποιο τρόπο να αποκτήσει πρόσβαση στα αρχεία του δικτύου σας.

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

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

Το πρώτο πράγμα που χρειάζεται να κάνετε είναι να συνδεθείτε στο κονσόλα διαχείρισης του δρομολογητή σας (router), πληκτρολογώντας τη διεύθυνση IP στη γραμμή διευθύνσεων του browser (συνήθως είναι οι: 192.168.0.1 ή 192.168.1.1 ανάλογα με το ποιο router χρησιμοποιείτε. Αν δεν γνωρίζετε την προεπιλεγμένη διεύθυνση του router σας πηγαίνετε στη γραμμή εντολών από

Έναρξη/ Εκτέλεση/Αναζητήστε για cmd τρέξτε το exe και πληκτρολογήστε ipconfig. Η διεύθυνση θα πρέπει να αναγράφεται δίπλα στο Default Gateway του τοπικού δικτύου σας.

Εναλλακτικά, αν χρησιμοποιείτε Mac, μπορείτε να βρείτε την προεπιλεγμένη διεύθυνση πηγαίνοντας στο Δίκτυο που βρίσκεται κάτω από το System Preferences (Προτιμήσεις συστήματος). Η IP θα πρέπει να αναγράφεται ακριβώς δίπλα στο «Router:» αν χρησιμοποιείτε Ethernet, είτε κάνοντας κλικ στο «Για προχωρημένους …» και πάτε στην καρτέλα «TCP / IP» αν χρησιμοποιείτε Wi-Fi. Στη συνέχεια, πληκτρολογείτε τη διεύθυνση στον browser και θα σας ζητηθούν τα στοιχεία σύνδεσής σας – αν δεν έχετε αλλάξει τις προεπιλεγμένες ρυθμίσεις το όνομα και ο κωδικός χρήστη θα πρέπει να υπάρχουν στην πίσω πλευρά του router σας. Αν δεν το βρίσκετε κατεβάστε αυτό το αρχείο που περιέχει προεπιλεγμένα ονόματα και κωδικούς πρόσβασης (PDF). Εναλλακτικά μπορείτε να ψάξετε από εδώ, ή από εδώ ή να το αναζητήσετε στο Google. Συνιστούμε να αλλάξετε όνομα και κωδικό άμεσα.

Μόλις δείτε το εσωτερικό της κονσόλα διαχείρισης του δρομολογητή σας αναζητήστε μια ενότητα που θα σας εμφανίσει τις συνδεδεμένες συσκευές ή την κατάσταση της ασύρματης λειτουργίας. Στο router που χρησιμοποιήσαμε βρήκαμε τη λίστα στην ενότητα DHCP Clients List. Καμιά φορά είναι διαθέσιμη από τη διαδρομή Status/Wireless, και θα το βρείτε σαν «Attached Devices».



Ελέγξτε την λίστα αν ανάμεσα στις συσκευές που αναγράφονται υπάρχει και κάποιος εισβολέας. Μπορείτε να βρείτε τη διεύθυνση MAC / IP των υπολογιστών σας από το Command Prompt πληκτρολογώντας,’ipconfig /all” Η διεύθυνση MAC θα εμφανίζεται σαν φυσική διεύθυνση.

Τι κάνω μετά;

Η καλύτερη και πιο απλή λύση είναι να δημιουργήσετε έναν ισχυρό κωδικό πρόσβασης χρησιμοποιώντας WPA2. Η κρυπτογράφηση WPA – WEP είναι πολύ εύκολο να σπάσει και θα πρέπει να την αποφύγετε αν είναι δυνατόν. Υπάρχουν κάποιες άλλες μέθοδοι που μπορείτε να χρησιμοποιήσετε για να ενισχύσετε την ασφάλεια σας, όπως η απενεργοποίηση της εκπομπής του SSID (αυτό εμποδίζει την εμφάνιση του ονόματος του δικτύου σας στις κοντινές συσκευές που αναζητούν Wi-Fi), ή να στήσετε ένα φίλτρο για να έχετε τη δυνατότητα να μπλοκάρετε συσκευές από τη διεύθυνση MAC. Αυτό δεν θα σταματήσει βέβαια έναν έμπειρο εισβολέα αλλά θα τον καθυστερήσει.

Τα παραπάνω βήματα θα πρέπει να είναι περισσότερο από αρκετά για τους περισσότερους χρήστες, αλλά αν χρειάζεστε πραγματικά να εντοπίσετε ποιος έχει παραβιάσει το δίκτυό σας και να εντοπίσετε την φυσική του θέση μπορείτε να χρησιμοποιήσετε ένα εργαλείο που ονομάζεται MoocherHunter. Θα χρειαστεί να κάψετε ένα Live CD και να εκκινήσετε τον υπολογιστή σας από αυτό. Από το Live CD θα μπορέσετε να εντοπίσετε όλου τους μη εξουσιοδοτημένους χρήστες του ασύρματου σας δικτύου. Σύμφωνα με την περιγραφή του προγράμματος, ανιχνεύει την κίνηση που αποστέλλεται σε όλο το δίκτυο και μπορεί να βρει την πηγή με ακρίβεια 2 μέτρων.

Το MoocherHunter συμπεριλαμβάνεται στο OSWA Assistant. Μπορείτε να κατεβάσετε το OSWA Assistant από εδώ.

Εναλλακτικά μπορείτε να χρησιμοποιήσετε την εφαρμογή Wireless Network Watcher. Θα σας ειδοποιεί ηχητικά, κάθε φορά που κάποιος συνδέεται στο δίκτυο σας.

Σάββατο 12 Νοεμβρίου 2011

Οδηγός Χρήσης των Ελληνικών σε Web Εφαρμογές

Ένα από τα πλέον συχνά ερωτήματα που τίθενται στο Freestuff (αλλά και στα υπόλοιπα, σχετικά με το αντικείμενο, forums), αφορά τη γλώσσα μας. Και αυτό γιατί, οι χρήστες που κάνουν τα πρώτα τους βήματα στον θαυμαστό κόσμο του web, αντιμετωπίζουν - αργά ή γρήγορα - το πρόβλημα της ορθής εμφάνισης των Ελληνικών.

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

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


Ελληνικά filenames

Ξεκινώ από αυτό, γιατί είναι το θέμα που θα μας απασχολήσει λιγότερο:

*** ΜΗ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ ΕΛΛΗΝΙΚΑ FILENAMES ***

Απλούστατο και κατανοητό!


Εν αρχή ήτο το character set

Η γλώσσα μας πέρασε από 40 κύματα μέχρι να βρει τη θέση της στο παγκόσμιο στερέωμα των προτύπων που αφορούν την κωδικοποίηση των συμβόλων γραφής. Πριν την έλευση και τη μαζική υιοθέτηση του UTF-8, η συνήθης (και ορθή) επιλογή ήταν το ISO-8859-7. Λέω "συνήθης" γιατί έχω δει sites κωδικοποιημένα σε Windows-1253 καθώς και σε ISO-8859-1 (!), όπου φυσικά τα πάντα μετατρέπονταν σε html entities!

Η απάντηση στο ερώτημα "ποιο από τα δύο sets να χρησιμοποιήσω;" είναι απλή: αν επιθυμείτε η εφαρμογή σας να δέχεται και να απεικονίζει περιεχόμενο σε οποιαδήποτε γλώσσα (πέραν της Ελληνικής και των Αγγλικών) ή/και να δέχεται και να απεικονίζει περιεχόμενο από άλλα sites/υπηρεσίες, τότε είναι προτιμότερο το UTF-8। Αν σκοπεύετε να λειτουργείτε αυστηρά κεκλεισμένων των θυρών και δεν σας ενδιαφέρει τίποτε άλλο από το να δείξετε συγκεκριμένα πράγματα με συγκεκριμένο τρόπο, τότε μπορείτε να το κάνετε και με ISO-8859-7.
Ας δούμε, όμως, πως οι κωδικοποιήσεις αυτές διαφοροποιούνται στην πράξη:

•Η θεμελιώδης διαφορά μεταξύ των δύο κωδικοποιήσεων είναι το μέγεθος (σε bytes) των χαρακτήρων. Η ISO-8859-7 είναι single-byte, συνεπώς αντιστοιχεί 1 byte σε κάθε χαρακτήρα. Η UTF-8 είναι multi-byte, αντιστοιχούν από 1 έως 6* bytes σε κάθε χαρακτήρα, ανάλογα το set. Στο ελληνικό αλφάβητο (ευτυχώς) αντιστοιχούν 2 bytes ανά χαρακτήρα.

*Θεωρητικό μέγιστο. Στην πράξη ισχύει το 4.

•Ως εκ τούτου, τα UTF-8 ελληνικά κείμενα χρειάζονται περίπου διπλάσιο χώρο αποθήκευσης. Λέω "περίπου" καθώς το ASCII set (λατινικοί χαρακτήρες, ψηφία, σημεία στίξης, κοινά σύμβολα) εξακολουθεί να καταλαμβάνει 1 byte. Αυτός άλλωστε ήταν και ο λόγος της ευρείας αποδοχής του UTF-8: η πλήρης συμβατότητα με τα υπάρχοντα αναρίθμητα ASCII κείμενα και source codes.

•Η PHP, και συγκεκριμένα οι συναρτήσεις που έχουν να κάνουν με το χειρισμό των strings, είναι single-byte. Για την ακρίβεια, είναι binary με την έννοια ότι δεν ασχολούνται καν με χαρακτήρες. Αυτό αναμένεται να αλλάξει στην επερχόμενη έκδοση 6, η οποία θα υποστηρίζει το UTF-8 εγγενώς. Μέχρι τότε, συναρτήσεις όπως η strlen(), substr(), parse_str(), κλπ, θέλουν προσοχή ή/και αντικατάσταση με τις αντίστοιχες multi-byte.

•Αν η σελίδα σας είναι σε ISO-8859-7 και επιθυμείτε να την ενημερώσετε με κείμενα που γράφετε στο PC σας, θυμηθείτε πως τα Windows χρησιμοποιούν παρόμοια κωδικοποίηση (1253), και όχι ακριβώς την ίδια. Η πιο χαρακτηριστική διαφορά είναι η διαφορετική θέση του Ά (άλφα κεφαλαίο τονούμενο). Ανάλογα με τον τρόπο που τα μεταφέρετε, μπορεί να έχετε πρόβλημα. Φυσικά, αυτό μπορεί να συμβεί και στην περίπτωση του UTF-8, εκεί όμως οποιοδήποτε σφάλμα είναι άμεσα εμφανές.

•Σήμερα, είναι πιο εύκολο να βρείτε Unicode Ελληνική γραμματοσειρά παρά ANSI. Αυτές, άρχισαν να εξαφανίζονται με την έλευση των XP.

•Ο κόσμος του web δικτυώνεται ολοένα και περισσότερο, μέσω διαδικασιών syndication (RSS), δημοσίων APIs, restfull υπηρεσιών και mashup. Η κοινή "γλώσσα" όλων αυτών, η esperanto του web τρόπος ειπείν, είναι η UTF-8. Η κωδικοποίηση αυτή σας παρέχει τη δυνατότητα ανταλλαγής δεδομένων με οποιοδήποτε άλλο site ή υπηρεσία, σε οποιαδήποτε γλώσσα, χωρίς την ανάγκη περίπλοκων - και ενίοτε αδύνατων - μετατροπών.

Για μένα, δεν τίθεται θέμα επιλογής. Υποστηρίζω ένθερμα το UTF-8, γιατί θέλω οι εφαρμογές μου να είναι "international". Να παίζουν οπουδήποτε, να δέχονται κείμενα από παντού. Να κάνω τα mashup μου χωρίς να με απασχολεί αν ο τίτλος του youtube clip - για παράδειγμα - είναι στα Γαλλικά, ή μιας ταινίας από το IMDB στα Ισπανικά. Να ανταλλάσσω feeds και πάσης φύσεως xml χωρίς μετατροπές. Προφανώς, αυτή είναι η κωδικοποίηση που θα υιοθετήσω και στη συνέχεια του οδηγού. Φυσικά, είστε ελεύθεροι να διαφωνήσετε. Στις περισσότερες περιπτώσεις, το μόνο που χρειάζεται είναι μια απλή αντικατάσταση. Αν χρειάζεται διαφορετική αντιμετώπιση, να είστε σίγουροι πως θα την αναφέρω. Συνεπώς, αν δεν λέω τίποτα, όπου βλέπετε UTF-8 εσείς θα βάζετε ISO-8859-7. Διαφορετικά, δώστε προσοχή στο κείμενο!


Τα εργαλεία κάνουν το μάστορα

Είναι αυτονόητο πως το πρώτο την τάξη εργαλείο σας, είναι ο editor. Συνηθίζουμε να τον λέμε ascii, text ή code editor. Υπάρχουν πολλοί, για κάθε γούστο: σκέτοι ή με καλούδια, δωρεάν ή επί πληρωμή. Το ελάχιστο ζητούμενο είναι, φυσικά, η υποστήριξη UTF-8 προκειμένου να σώζουμε σωστά τα αρχεία που περιέχουν Ελληνικές συμβολοσειρές.

Ένας τέτοιος editor, με την υποστήριξη που ζητάμε, έρχεται προεγκατεστημένος με τα Windows. Αναφέρομαι στο περίφημο ανά τους αιώνες Notepad, δεινόσαυρο που ζει μέχρι τις μέρες μας. Με σπαρτιάτικο εξοπλισμό, το Notepad φαντάζει και είναι η φυσική επιλογή των νεοφώτιστων. Ένα πράγμα έχω να σας πω γι αυτό:

*** ΜΗ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ ΤΟ NOTEPAD ΤΩΝ WINDOWS ***

Δεν μπορείτε να φανταστείτε πόσα topics έχουν ανοίξει, πόσα μηνύματα έχουν γραφτεί και πόσες ώρες έχουν χαθεί εξαιτίας του... Αν πω χιλιάδες, θα είμαι συντηρητικός στις εκτιμήσεις μου! Ο λόγος της οικολογικής αυτής καταστροφής ακούει στο όνομα BOM και είναι 3 αόρατα bytes που εισάγονται - με το έτσι θέλω - στην αρχή κάθε αρχείου που σώζεται από το Notepad ως UTF-8. Τα bytes αυτά, αν και αόρατα στον άνθρωπο, είναι καθόλα ορατά στα προγράμματα Η/Υ και συγκεκριμένα την PHP και τους browsers. Και η μεν και οι δε, τους δέχονται - με δυσάρεστες όμως συνέπειες:

•Η μεν PHP τους θεωρεί ως έξοδο (συνήθως πρόωρη) με αποτέλεσμα πολύ συχνά να διαμαρτύρεται φωνάζοντας το περιβόητο και συχνά ακατανόητο "headers already sent", κάθε φορά που χρησιμοποιούμε έμμεσα ή άμεσα την εντολή header(). Η πιο διαδεδομένη έμμεση χρήση, είναι η session_start().

•Οι δε browsers (αν και όχι όλοι, ονόματα δεν λέμε) αγνοούν το με αποτέλεσμα το rendering της σελίδας σας να γίνεται σε quirks mode.

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

*** ΜΗ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ BOM ***

Και αφού το Notepad δεν δίνει την επιλογή, δεν έχετε άλλη λύση από το να μην το χρησιμοποιείτε। Μπορείτε, κάλλιστα, να το αντικαταστήσετε με πληθώρα εναλλακτικών editors, ένας εκ των οποίων είναι και το (δωρεάν) Notepad++. Όχι μόνο θα λύσετε το πρόβλημα του BOM, αλλά θα αυξήσετε την παραγωγικότητά σας κατακόρυφα μιας και το Notepad++ έρχεται εξοπλισμένο σαν αστακός!

Ξεκινήστε σε σωστή βάση

Τα θεμέλια μιας δυναμικής εφαρμογής είναι η βάση δεδομένων της. Εκεί σώζονται τα κείμενά μας και από εκεί ανασύρονται. Ο server που τη διαχειρίζεται (DBMS), αγνοεί τις προθέσεις μας. Υπακούει μόνο σε εντολές και ρυθμίσεις! Αν θέλουμε, λοιπόν, να μην έχουμε πρόβλημα μαζί του θα πρέπει να δηλώσουμε ευθύς εξαρχής το επιθυμητό character set. Η διαδικασία ποικίλει ανάλογα τη βάση. Θα περιγράψω τις ρυθμίσεις της MySQL, μιας και αυτή είναι η πλέον δημοφιλής επιλογή.

Η MySQL είναι τρομακτικά ευέλικτη όσον αφορά το θέμα των character sets και collations που χρησιμοποιεί. Η ευελιξία της αυτή, στην πράξη, δημιουργεί προβλήματα αφού - κατά κανόνα - όλοι οι "πρωτοετείς" την πατάνε! Να θυμίσω πως το character set χρησιμοποιείται στις μετατροπές ιδίων χαρακτήρων σε διαφορετικά sets (πχ ISO-8859-1 σε UTF-8) ενώ το collation χρησιμοποιείται στις μετατροπές (συγκρίσεις/ταξινομήσεις) διαφορετικών χαρακτήρων του ιδίου set (πχ UPPER, 'ABΓ'='αβγ', ORDER BY, κλπ). Όπως αντιλαμβάνεστε, σε ένα character set αντιστοιχούν περισσότερα του ενός collations, ενώ το αντίθετο δεν ισχύει: σε κάθε collation αντιστοιχεί ένα character set. Για το λόγο αυτό, το collation χρησιμοποιείται ως συντόμευση/αναφορά και των δύο.

Για την απροβλημάτιστη συνεργασία σας με τη MySQL χρειάζονται δύο απλοί κανόνες:

- Σωστό collation στη δημιουργία της βάσης και των πινάκων της (λογικό και ευνόητο)
- Σωστό collation στην επικοινωνία σας μαζί της (Ουπς! εδώ γίνεται το μπέρδεμα)

Το πρώτο πράγμα που κάνει κανείς είναι η δημιουργία database. Αυτό, παραδοσιακά, γίνεται μέσω του phpMyAdmin, de facto περιβάλλον διαχείρισης της MySQL. Στην αρχική του σελίδα υπάρχει ένα input με τον τίτλο "Create new database". Δίπλα του, ένα select επιλογής collation και στη συνέχεια το submit "Create". Από κάτω, ένα select για την επιλογή του "connection collation".

*** ΕΠΙΛΕΞΤΕ utf8_general_ci ΚΑΙ ΣΤΑ ΔΥΟ SELECTS ***

Το αντίστοιχο του ISO-8859-7, είναι το greek_general_ci.

Αυτό το στάδιο είναι τόσο σημαντικό όσο δεν φαντάζεστε. Η default επιλογή της MySQL είναι το latin1_swedish_ci, παντελώς ακατάλληλη για μας. Εάν η database υπάρχει ήδη, βεβαιωθείτε πως έχει το σωστό collation. Το βλέπετε στην καρτέλα "Structure" (δεξιά), όταν κλικάρετε στο όνομα της database (αριστερά). Αναγράφεται στην τελευταία γραμμή του πίνακα. Αν στη στήλη "Collation" δείτε οτιδήποτε άλλο από utf8_general_ci, θα παιδευτείτε αδίκως. Η δημιουργήστε την εξ' αρχής, ή πηγαίνετε στην καρτέλα "Operations" και αλλάξτε της collation.

Αφού σετάρουμε τη βάση με το σωστό collation, προχωράμε στο προγραμματιστικό της μέρος, ξεκινώντας με τη σύνδεση:



if (mysql_connect($server, $username, $password))
{
if
(mysql_select_db($database))
{
mysql_query("SET NAMES 'utf8'"); // use
'greek' for ISO-8859-7

}
else
{
; // handle selection error
}
}
else
{
; // handle connection error
}


Στο παραπάνω snipet κρύβεται το μυστικό... To "SET NAMES 'utf8'" είναι το πρώτο και απολύτως απαραίτητο query που πρέπει να εκτελούμε αμέσως μετά τη σύνδεση. Βλέπετε, το collation της βάσης και των πινάκων δεν είναι αρκετό. Πρέπει να ταιριάξουμε και τα collation της επικοινωνίας, των εντολών μας και των δεδομένων αποστολής και λήψης. Όλα αυτά σετάρει μονομιάς η "SET NAMES...".

Αν δημιουργούμε τους πίνακες προγραμματιστικά (το πιο λογικό και σύνηθες), φροντίζουμε να επαναλάβουμε για μια ακόμη φορά τι θέλουμε:
κώδικας:
CREATE TABLE MyTable (...) ENGINE=MyISAM CHARSET=DEFAULT;


Με το option "CHARSET=DEFAULT" δηλώνουμε πως επιθυμούμε τη χρήση του default set της βάσης, και όχι του default set της MySQL (latin1_swedish_ci).

Θα ήθελα να κλείσω αυτήν την ενότητα με 2 σημαντικές επισημάνσεις:

1. Προσοχή στη χρήση του CHAR ως column type. Το CHAR αντιστοιχεί σε byte, κάτι που όπως έγραψα στην αρχή δεν συνάδει με την ταυτότητα του UTF-8. Αν αυτό που εννοείτε είναι "χαρακτήρες" και όχι "bytes", τότε θα πρέπει να χρησιμοποιήσετε VARCHAR. Για να γίνω πιο σαφής, ας υποθέσουμε πως έχετε ένα πεδίο ονόματι "name" όπου καταχωρείτε το όνομα του χρήστη. Ας υποθέσουμε, επίσης, πως επιτρέπετε ονόματα σε οποιαδήποτε γλώσσα αρκεί να μην ξεπερνούν τους 8 χαρακτήρες. Αν το δηλώσετε ως CHAR(8), τότε το όνομα "Vaggelis" θα περάσει, ενώ το "Βαγγέλης" θα κοπεί! Γιατί; Γιατί χρειάζεται 16 bytes και όχι 8. Αν το δηλώσετε ως VARCHAR(8), δεν θα έχετε πρόβλημα.

2. Το επίθεμα _ci σημαίνει "case insensitive", δηλαδή χωρίς διάκριση πεζών-κεφαλαίων. Αν η εφαρμογή σας απαιτεί διαφορετική μεταχείριση, τότε θα χρειαστείτε διαφορετικό collation.


Αλτ! Τις ει;

Σε αυτό το σημείο έχουμε το script μας σωσμένο σωστά, τη βάση μας σεταρισμένη όπως πρέπει, η σύνδεσή μας άψογη, και είμαστε έτοιμοι να στείλουμε σελιδούλα στον browser. Ε, δεν θα πρέπει να πούμε και σε αυτόν τον ταλαίπωρο ποια γλώσσα μιλάμε; Τι είναι αυτό που του στέλνουμε;

Αυτό (πρέπει να) το κάνουμε σε δύο μέρη:

- στα response headers του server, και
- στην html

Για το πρώτο, χρησιμοποιούμε την εντολή header():
κώδικας:
header('Content-type: text/html; charset=UTF-8');

...πριν από οποιαδήποτε έξοδο.

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

...αμέσως μετά το !

Δράττομαι της ευκαιρίας να επισημάνω μία - σοβαρή κατ' εμέ - παρανόηση η οποία βρίσκεται διάχυτη στο διαδίκτυο. Παντού θα βρείτε τη 2η γραμμή (meta), μα πουθενά την 1η (server responce). Αν και στην πράξη λειτουργεί (όπως λειτουργούν και άλλα πράγματα που δεν θα έπρεπε), ουσιαστικά είναι ημιτελής αντιμετώπιση καθώς οι δύο παραπάνω γραμμές εξυπηρετούν διαφορετικά ...συμφέροντα.

Η πρώτη γραμμή αφορά ένα υποχρεωτικό από το πρωτόκολο πεδίο: το Content-type. Αν δεν το βάλετε εσείς στον κώδικά σας, θα το βάλει μόνη της η PHP. Με τη μόνη διαφορά ότι η PHP - μιας και δεν ξέρει τι στέλνετε - θα το βάλει μισό:
κώδικας:
header('Content-type: text/html');

...δηλαδή, θα λείπει το character set! Αυτό σημαίνει, πως στέλνετε ότι νά'ναι... το default του πρωτοκόλου, το οποίο κάνει override το default του browser, το οποίο γίνεται override από το χρήστη μέσω σχετικής ρύθμισης στο μενού, και το οποίο - τελικά - γίνεται override από το meta!

Το "meta http-equiv" σημαίνει "http-equivalent", δηλαδή "http ισοδύναμο"। Παίζει το ρόλο του server response header. Πότε; Μα φυσικά, όταν ΔΕΝ υπάρχει ο server. Όπως, για παράδειγμα, όταν φορτώνουμε τη σελίδα από το σκληρό μας δίσκο!

Δώσμου το mail σου να σου πω ποιος είμαι

Μετά από μια ...επιτυχημένη σελίδα, έρχεται η σειρά του email. Είναι το επόμενο βήμα που παίζει το ρόλο της παγίδας, καθώς τα emails - εξ ορισμού - μεταφέρουν μηνύματα σε US-ASCII και 7bit. Οτιδήποτε άλλο απαιτεί χρήση των λεγόμενων MIME headers.

Για να μη σας σκοτίζω με λεπτομέρειες, παραθέτω συνάρτηση ονόματι mailex(), την οποία μπορείτε να χρησιμοποιείτε στη θέση της mail(). Η μόνη διαφορά βρίσκεται στο πρόσθετο όρισμα $from που είναι το mail του αποστολέα, κι αυτό γιατί είναι απαραίτητο. Τα υπόλοιπα ορίσματα είναι κοινά:

function mailex($from, $to, $subject, $message, $headers='', $args='')
{
$subject = '=?UTF-8?B?'.base64_encode($subject).'?=';

$headers = "From: $from\r\n".
"MIME-Version: 1.0\r\n".
"Content-Type: text/html; charset=\"UTF-8\"\r\n".
"Content-Transfer-Encoding: 8bit\r\n".
trim($headers);

return mail($to, $subject, $message, $headers, $args);
}


Για να την δοκιμάσετε, καλέστε την ως εξής:
κώδικας:
mailex('from@mail.gr', 'to@mail.gr', 'Δοκιμαστικό mail!', 'Για να δούμε τι θα δούμε...');



Προσοχή: Στη θέση των $from/$to ορισμάτων, βάζετε υπαρκτά mail accounts!

Μια εικόνα χίλιες λέξεις;

Η δημιουργία δυναμικών εικόνων με ελληνικό κείμενο είναι το τρίτο κατά σειρά ερώτημα που τίθεται, μετά τις σελίδες και τα emails. Το λάθος που κατά κανόνα γίνεται είναι η χρήση της συνάρτησης imagestring(). Αυτή είναι παντελώς ακατάλληλη για τη δουλειά που τη θέλουμε. Υπάρχει, ευτυχώς, η κατάλληλη και ακούει στο όνομα imagettftext(). Σύμφωνα και με το manual (που θα πρέπει οπωσδήποτε να διαβάσετε), υποστηρίζει Unicode TrueType (*.ttf) fonts.

Παραθέτω ένα code snipet (βιβλιοθήκη GD) για να δείτε στην πράξη πως λειτουργεί:
κώδικας:
$img = imagecreatetruecolor(400, 48);
$fgc = imagecolorallocate($img, 255, 255, 255); // white
$bgc = imagecolorallocate($img, 0, 0, 0); // black
imagefill($img, 0, 0, $bgc);
//imagettftext($img, 32, 0, 8, 40, $fgc, 'DejaVuSans.ttf', iconv('ISO-8859-7', 'UTF-8', 'Δοκιμή Ελληνικών')); // ISO-8859-7
imagettftext($img, 32, 0, 8, 40, $fgc, 'DejaVuSans.ttf', 'Δοκιμή Ελληνικών'); // UTF-8
header('content-type: image/jpeg');
imagejpeg($img);


Κατ' αρχάς χρειαζόμαστε ένα font. Στο παράδειγμα, χρησιμοποιώ το (ελεύθερο δικαιωμάτων) DejaVuSans. Αφού το κάνετε download, το αποσυμπιέζετε στον κατάλογο που βρίσκετε το script σας. Στο σημείο αυτό θα ήθελα να εφιστήσω την προσοχή σας στο όρισμα $fontfile. Η συνάρτηση είναι πολύ περίεργη όσον αφορά το όνομα και δυστυχώς η συμπεριφορά της ποικίλει ανάλογα με την έκδοση της βιβλιοθήκης GD που χρησιμοποιείτε. Στη δική μου περίπτωση (έκδοση 2.0.34), η κατάληξη είναι απαραίτητη. Σε άλλες, δεν πρέπει να υπάρχει!

Το δεύτερο πράγμα που πρέπει να προσέξετε είναι το όρισμα $text. Εάν έχετε επιλέξει UTF-8, δεν χρειάζεται να κάνετε καμιά μετατροπή. Αν όμως έχετε επιλέξει ISO-8859-7, θα πρέπει να το μετατρέψετε σε UTF-8, όπως φαίνεται στο παράδειγμα.

Ανακεφαλαίωση

Για την απροβλημάτιστη χρήση των Ελληνικών, απαιτούνται οι εξής ενέργειες:


•Επιλογή ενός εκ των δύο αποδεκτών κωδικοποιήσεων UTF-8 ή ISO-8859-7, και χρήση αυτού (και μόνον αυτού) με θρησκευτική ευλάβεια οπουδήποτε υπάρχει ελληνικό κείμενο.


•Στην περίπτωση του UTF-8, χρησιμοποιείτε editor με την ανάλογη υποστήριξη (όχι το Notepad!) και σώζετε τα αρχεία σας με την αντίστοιχη επιλογή - χωρίς BOM. Στην περίπτωση του ISO-8859-7, σώζετε ως "plain text", πλην όμως οι χρήστες Windows θα έχουν πρόβλημα με το Ά (άλφα κεφαλαίο τονούμενο). Αν ο editor σας δίνει τη δυνατότητα να εργάζεστε και να σώνετε σε ISO-8859-7 (έναντι των Windows-1253), κάντε το.


•Δημιουργείτε τη βάση και τους πίνακες με το κατάλληλο collation: utf8_general_ci (UTF-8) ή greek_general_ci (ISO-8859-7). Το πρώτο query που εκτελείτε, αμέσως μετά τη σύνδεση - είναι το "SET NAMES 'utf8'" ή "SET NAMES 'greek'" αντιστοίχως.


•Στο markup σας (html) θα πρέπει να υπάρχει το αμέσως μετά το . Για να είστε τύπος και υπογραμμός, θα πρέπει πριν την οποιαδήποτε έξοδο από το script σας (echo, print, κλπ), να προηγηθεί η εντολή header('Content-type: text/html; charset=UTF-8'); (αντικαθιστάτε με ISO-8859-7, και στις δύο περιπτώσεις, εφόσον αυτό επιλέξατε)


•Για να στείλετε email, αντικαθιστάτε τη mail() με τη mailex() (βλέπε ανωτέρω).


•Για κείμενο σε εικόνες (μέσω της βιβλιοθήκης GD) θα χρειαστείτε ένα unicode truetype font και την imagettftext().


Σας εύχομαι happy coding, και μακρυά από τις ...κακοτοπιές!

Με την επιφύλαξη του δικαιώματος αντιγραφής
Νικόλαος Β. Κάσσος (aka "nbc")
Απο: http://www.freestuff.gr/forums/viewtopic.php?t=52609

Κυριακή 4 Σεπτεμβρίου 2011

Μικρή εισαγωγή στα regular expressions

- ΜΠΟΡΕΙ ΝΑ ΦΑΙΝΕΤΑΙ ΔΥΣΚΟΛΟ ΑΛΛΑ ΣΤΟ ΤΕΛΟΣ ΓΙΝΕΤΑΙ ΜΑΝΙΑ -

Με τα regular expressions μπορούμε να αναγνωρίζουμε ακολουθίες χαρακτήρων. Η ανθρώπινη νοημοσύνη μας δίνει την δυνατότητα να καταλαβαίνουμε ενότητες γραμμάτων και αριθμών. Για έναν υπολογιστή όμως αυτό είναι πολύ δύσκολο γιατί στην δικιά του αντίληψη όλα είναι bits και bytes.

Τα regular expressions λειτουργούνε σαν τα φίλτρα των file managers. Σε έναν file manager γράφουμε για παράδειγμα *.php για να βρούμε όλα τα αρχεία που τελειώνουν σε .php . Τα regular expressions είναι μια πολύ προχωρημένη έκδοση τέτοιων φίλτρων.

Στα regular expressions της γλώσσας Perl (στην οποία βασίζεται και η PHP) χρησιμοποιούμε χαρακτήρες για να δηλώσουμε την αρχή και το τέλος ενός μοτίβου (pattern)। Μας βολεύει να χρησιμοποιήσουμε έναν χαρακτήρα που δεν επαναλαμβάνεται από το pattern μας. Συνήθως χρησιμοποιείται το slash.


Παράδειγμα 1: Βρες το "abc" οπουδήποτε σε ένα string
κώδικας:
/abc/

Σύμβολο: $
Το $ στο τέλος του pattern συμβολίζει ένα string που κλείνει με το pattern μας.

Παράδειγμα 3: Βρες το "abc" στο τέλος του string
κώδικας:
/abc$/

Σύμβολο: .
Η τελεία συμβολίζει έναν οποιοδήποτε χαρακτήρα.

Παράδειγμα 4: Βρες το "ab", μετά έναν χαρακτήρα και μετά το "c"
κώδικας:
/ab.c/

Σύμβολο: *
Ο αστερίσκος συμβολίζει ένα pattern που επαναλαμβάνεται απο 0 έως άπειρες φορές.

Παράδειγμα 5: Βρες το "a", μετά κανένα ή όσα "b" θέλεις και μετά το "c"
κώδικας:
/ab*c/

Σύμβολο: ?
Ο λατινικό ερωτηματικό συμβολίζει ένα pattern που επαναλαμβάνεται απο 0 έως μία φορές.

Παράδειγμα 6: Βρες το "a", μετά κανένα ή ένα "b" και μετά το "c"
κώδικας:
/ab?c/

Σύμβολο: +
Ο συν συμβολίζει ένα pattern που επαναλαμβάνεται απο μία έως άπειρες φορές.

Παράδειγμα 7: Βρες το "a", μετά ένα ή περισσότερα "b" και μετά το "c"
κώδικας:
/ab+c/

Σύμβολα: { }
Τα άγκιστρα ανοίγουν μία παρένθεση για να βάλουμε ένα εύρος επανάληψης.

Παράδειγμα 8: Βρες το "a", μετά από 2 έως 7 φορές το "b" και μετά το "c"
κώδικας:
/ab{2,7}c/

Το εύρος μπορεί να είναι ανοιχτό, για παράδειγμα {2,} σημαίνει από 2 έως άπειρο. Τα ποιο πάνω σύμβολα * ? + μπορεί να γραφτούν και σαν {0,} {0,1} {1,} αντίστοιχα.

Σύμβολα: [ ]
Οι αγκύλες δηλώνουν μία ομάδα χαρακτήρων.

Παράδειγμα 9: Βρες το "a", μετά έναν από τους χαρακτήρες "d", "e", "f" και μετά το "c"
κώδικας:
/a[def]c/

Για ευκολία μπορούμε να χρησιμοποιούμε την παύλα για να ορίζουμε ομάδες αριθμών ή γραμμάτων. Για παράδειγμα το [a-z] είναι το ίδιο με το να γράψουμε όλα τα μικρά γράμματα του λατινικού αλφαβήτου. Επίσης μπορούμε να κάνουμε συνδυασμούς: [a-zA-Z0-9]. Αυτό όμως σημαίνει οτι η παύλα έχει ιδιαίτερη σημασία μέσα σε αγκύλες. Γι αυτό αν θέλουμε στην ομάδα να συμπεριλάβουμε και την παύλα πρέπει να την βάλουμε είτε στην αρχή είτε στο τέλος: [a-zA-Z0-9-]

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

Παράδειγμα 10: Βρες το "a", μετά έναν χαρακτήρα που να μην είναι ο "d", "e", "f" και μετά το "c"
κώδικας:
/a[^def]c/

Σύμβολα: ( )
Οι παρενθέσεις ομαδοποιούν αποτελέσματα που θέλουμε να χρησιμοποιήσουμε. Επίσης ανάλογα με την PHP εντολή μπορούμε να ελέγχουμε το περιεχόμενο ενός pattern.

Παράδειγμα 11: Βρες το "a" μετά κανένα ή όσα "ps" θες και μετά ένα "c"
κώδικας:
/a(ps)*c/

Όμως τι γίνεται αν θέλουμε να χρησιμοποιήσουμε έναν από αυτούς τους ειδικούς χαρακτήρες; Απλά βάζουμε ένα back slash πριν τους γράψουμε.

Παράδειγμα 12: Βρες το "ab*c[123]z"
κώδικας:
/ab\*c\[123\]z/

Υπάρχουν κι άλλοι ειδικοί χαρακτήρες τους οποίους μπορείτε να βρείτε στο PHP Manual αν ψάξετε για "Pattern syntax". Για παράδειγμα το \w συμβολίζει οποιονδήποτε χαρακτήρα γράμμα και το \W οποιονδήποτε μη γράμμα.


Τέλος, υπάρχουν χαρακτήρες που ελέγχουν τον τρόπο χρήσης του pattern από την PHP και μπαίνουν στο τέλος του pattern. Αυτούς τους ονομάζουμε pattern modifiers. Ο πιο χρήσιμος είναι ο i και συμβολίζει οτι το pattern μας δεν είναι case sensitive.

Παράδειγμα 13: Βρες το "abc" είτε είναι γραμμένο με μικρά είτε με κεφαλαία γράμματα
κώδικας:
/abc/i

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

Παράδειγμα 14: Βρες ένα email.
κώδικας:
/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$/i

Η PHP μας δίνει δύο ομάδες από functions για regular expressions. Τις ereg* και τις preg*. Από αυτές τις δύο στα manual αναφέρεται οτι οι preg* πρέπει να προτιμούνται γιατί είναι ποιο γρήγορες.

Διαβάστε το
http://gr.php.net/manual/en/ref.pcre.php
για περισσότερα για τις αναλύσεις των functions με τα οποία μπορείτε να βρίσκετε ένα ή πολλαπλά ευρήματα από patterns, να κάνετε αλλαγές (replacements) στα strings σας, ή να σπάτε (split) ένα string σε κομμάτια।

Πηγή: http://www.freestuff.gr/forums/viewtopic.php?t=25478

regular expressions for jquery validation



// Αρχίζει απο το ^ και τελειώνει στο $
return this.optional(element) / ^[A-Za-z0-9!@#$%^&*()_]{6,16}$ /i.test(value);



/// Επιτρέπει απο 6 εως 16 χαρακτήρες
$.validator.addMethod("katanalosi",function(value,element){
return this.optional(element) /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
},"Passwords are 6-16 characters");


/// Ελέγχει σωστό email
$.validator.addMethod("email", function(value, element) {
return this.optional(element) /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");


/// Δεν επιτρέπονται σύμβολα
$.validator.addMethod("katanalosi", function(value, element) {
return this.optional(element) /^[A-Za-z\d]+$/i.test(value);
}, "Δεν επιτρέπονται σύμβολα.");



/// Ιστοσελίδα με όλα τα Regular για δοκιμή
http://gskinner.com/RegExr/?2ua2e

Σάββατο 18 Ιουνίου 2011

240 plugins jquery


Form Validation
jQuery ValidationAuto Help.Simple jQuery form validationjQuery XAV - form validationsjQuery AlphaNumericMasked InputTypeWatch PluginText limiter for form fieldsAjax Username Check with jQuery
File upload
Ajax File UploadjQUploaderMultiple File Upload pluginjQuery File StyleStyling an input type fileProgress Bar Plugin
Form - Select Box stuff
jQuery ComboboxjQuery controlled dependent (or Cascadign) Select List.Multiple SelectsSelect box manipulationSelect Combo PluginjQuery - LinkedSelectAuto-populate multiple select boxesChoose Plugin (Select Replacement)
Form Basics, Input Fields, Checkboxes etc.
jQuery Form Plugin.jQuery-Form.jLook Nice Forms.jNice.Ping PluginToggle Form TextToggleValjQuery Field PluginjQuery Form’n Field plugin.jQuery Checkbox manipulationjTaggingjQuery labelcheck.Overlabel3 state radio buttonsShiftCheckbox jQuery PluginWatermark InputjQuery Checkbox (checkboxes with imags)jQuery SpinButton ControljQuery Ajax Form BuilderjQuery Focus FieldsjQuery Time Entry
Time, Date and Color Picker
jQuery UI DatepickerjQuery date picker pluginjQuery Time PickerTime PickerClickPickTimePicker.Farbtastic jQuery Color Picker PluginColor Picker by intelliance.fr
Rating Plugins
jQuery Star Rating PluginjQuery Star RaterContent rater with asp.net, ajax and jQuery.Half-Star Rating Plugin
Search Plugins
jQuery SuggestjQuery AutocompletejQuery Autocomplete ModjQuery Autocomplete by AjaxDaddyjQuery Autocomplete Plugin with HTML formatting.jQuery AutocompleterAutoCompleter (Tutorial with PHP&MySQL)quick Search jQuery Plugin
Inline Edit & Editors
jTagEditor.WYMeditor.jQuery jFrameJeditable - edit in place plugin for jQueryjQuery editable.jQuery Disable Text Select PluginEdit in Place with Ajax using jQuery.jQuery Plugin - Another In-Place EditorTableEditortEditable - in place table editing for jQuery.
Audio, Video, Flash, SVG, etc
jMedia - accessible multi-media embeddingJBEdit - Ajax online Video EditorjQuery MP3 Plugin.jQuery Media Plugin.jQuery Flash PluginEmbed QuickTimeSVG Integration.
Photos/Images/Galleries
ThickBox.jQuery lightBox pluginjQuery Image StripjQuery slideViewerjQuery jqGalScroll 2.0jQuery - jqGalViewIIjQuery - jqGalViewIIIjQuery Photo SliderjQuery Thumbs - easily create thumbnailsjQuery jQIR Image ReplacementjCarousel LitejQPanViewjCarouselInterface ImageboxImage Gallery using jQuery, Interface & Reflactions.simple jQuery GalleryjQuery Gallery ModuleEO Gallery.jQuery ScrollShowjQuery Cycle PluginjQuery FlickrjQuery Lazy Load Images PluginZoomi - Zoomable ThumbnailsjQuery Crop - crop any image on the fly.Image Reflection
Google Map
jQuery Plugin googlemapsjMaps jQuery Maps FrameworkjQmapsjQuery & Google MapsjQuery Maps Interface forr Google and Yahoo mapsjQuery J Maps - by Tane Piper
Games
Tetris with jQueryjQuery Chess.Mad Libs Word GamejQuery Puzzle.jQuery Solar System (not a game but awesome jQuery Stuff).
Tables, Grids etc.
UI/TablesorterjQuery ingrid.jQuery Grid Plugin.Table Filter - awesome!TableEditorjQuery Tree TablesExpandable “Detail” Table RowsSortable Table ColdFusion Costum Tag with jQuery UI.jQuery BubbleTableSorter.Scrollable HTML TablejQuery column Manager PluginjQuery tableHover PluginjQuery columnHover PluginjQuery Grid.TableSorter plugin for jQuerytEditable - in place table editing for jQuery.jQuery charToTable PluginjQuery Grid Column SizingjQuery Grid Row Sizing
Charts, Presentation etc.
jQuery Wizard Plugin jQuery Chart PluginBar Chart.
Border, Corners, Background
jQuery Corner.jQuery Curvy CornerNifty jQuery CornerTransparent CornersjQuery Corner GalleryGradient Plugin
Text and Links
jQuery Spoiler pluginText HighlightingDisable Text Select PluginjQuery NewstickerAuto line-height PluginTextgrad - a text gradient pluginLinkLook - a link thumbnail previewpager jQuery PluginshortKeys jQuery PluginjQuery BiggerlinkjQuery Ajax Link Checker
Tooltips
jQuery Plugin - TooltipjTip - The jQuery Tool TipclueTipBetterTip.Flash Tooltips using jQueryToolTip
Menus, Navigations
jQuery Tabs Plugin - awesome! [demo nested tabs]another jQuery nested Tab Set example (based on jQuery Tabs Plugin)jQuery idTabs.jdMenu - Hierarchical Menu Plugin for jQueryjQuery SuckerFish StylejQuery Plugin TreeviewtreeView Basic.FastFind MenuSliding MenuLava Lamp jQuery Menu.jQuery iconDockjVariations Control PanelContextMenu pluginclickMenu.CSS Dock MenujQuery Pop-up Menu TutorialSliding Menu
Accordions, Slide and Toggle stuff
jQuery Plugin AccordionjQuery Accordion Plugin Horizontal Wayhaccordion - a simple horizontal accordion plugin for jQuery.Horizontal Accordion by portalzine.de.HoverAccordionAccordion Example from fmarcia.infojQuery Accordion ExamplejQuery Demo - Expandable Sidebar MenuSliding Panels for jQueryjQuery ToggleElementsCoda Slider.jCarouselAccesible News Slider PluginShowing and Hiding code ExamplesjQuery Easing PluginjQuery PortletsAutoScrollInnerfade.
Drag and Drop
UI/Draggables.EasyDrag jQuery PluginjQuery PortletsjqDnR - drag, drop resizeDrag Demos.
XML XSL JSON Feeds
XSLT PluginjQuery Ajax call and result XML parsing.xmlObjectifier - Converts XML DOM to JSONjQuery XSL Transform.jQuery Taconite - multiple Dom updatesRSS/ATOM Feed Parser PluginjQuery Google Feed Plugin
Browserstuff
Wresize - IE Resize event Fix Plugin.jQuery ifixpng.jQuery pngFix.Link Scrubber - removes the dotted line onfocus from links.jQuery Perciformes - the entire suckerfish familly under one roofBackground IframeQinIE - for proper display of Q tags in IEjQuery Accessibility PluginjQuery MouseWheel Plugin
Alert, Prompt, Confirm Windows
jQuery Impromptu.jQuery Confirm PluginjqModal.SimpleModal
CSS
jQuery Style SwitcherJSS - Javascript StyleSheetsjQuery Rule - creation/manipulation of CSS RulesjPrintArea.
DOM, Ajax and other jQuery plugins
FlyDOM.jQuery Dimenion PluginjQuery LogginMetadata - extract metadata from classes, attributes, elementsSuper-tiny Client-Side Include Javascript jQuery Plugin.Undo Made Easy with AjaxJHeartbeat - periodically poll the serverLazy Load PluginLive QueryjQuery Timers.jQuery Share it - display social bookmarking iconsjQuery serverCookieJarjQuery autoSavejQuery PufferjQuery iFrame PluginCookie Plugin for jQueryjQuery Spy - awesome pluginEffect Delay TrickjQuick - a quick tag creator for jQueryMetaobjectselementReady

Σάββατο 23 Απριλίου 2011

Tutorials













Παρασκευή 1 Απριλίου 2011

Συμβουλές για σωστό SEO (Search engine optimization)

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

* Κάντε έρευνα για τις λέξεις κλειδιά που αφορούν το site σας και χρησιμοποιείστε σωστά αυτές που θα επιλέξετε. Μην επαναλαμβάνεται πολύ συχνά στις ίδιες σελίδες τις ίδιες λέξεις γιατί μπορεί να θεωρηθεί ότι κάνετε keyword stuffing.

* Κρατήστε και παρακολουθείτε στατιστικά και αναλύσεις του site σας και δείτε ποιες λέξεις κλειδιά σας φέρνουν επισκέπτες και γενικότερα τι ενδιαφέρει περισσότερο τους επισκέπτες σας. Έπειτα μπορείτε να γράψετε άρθρα σχετικά με τις λέξεις κλειδιά που ψάχνουν οι επισκέπτες σας, αποφεύγοντας όμως το keyword stuffing, δηλαδή τις
περιπτώσεις όπου γράφονται κείμενα που επαναλαμβάνουν συνέχεια τις ίδιες λέξεις
με σκοπό να κερδίσουν την "εύνοια" των μηχανών αναζήτησης.

* Μη ξεχάσετε τα title, description και keywords tags, τα heading tags (h1,h2,h3...), alt περιγραφές στις εικόνες, strong και em για να δώσετε μεγαλύτερη βαρύτητα σε
φράσεις όπου χρειάζεται. Μην βάζετε ίδιους τίτλους σε διαφορετικές σελίδες του
site σας και το καλό είναι το μήκος τους να μην ξεπερνάει τους 70 χαρακτήρες. Αν
στο site σας υπάρχουν εσωτερικοί σύνδεσμοι που οδηγούν στις ίδιες σελίδες
φροντίστε να ορίσετε με την rel cannonical ποια είναι η βασική - κύρια σελίδα ώστε να μη θεωρηθεί ως πολλαπλή καταχώρηση (duplicate content) και απόπειρα εξαπάτησης από τις μηχανές αναζήτησης. Ενδείκνετε και η χρήση των microformats tags.

* Φτιάξτε και ενημερώνετε κάποιο group ή page στο facebook, λογαριασμό στο twitter αλλά και στο feedburner προσφέροντας στους επισκέπτες σας δυνατότητα ανάγνωσης των άρθρων σας είτε από RSS feed πρόγραμμα, είτε λαμβάνοντας τα feeds στα mail accounts τους.

* Μην εφαρμόζετε black hat τεχνικές και γενικότερα αθέμιτες τεχνικές που μπορεί να τιμωρήσουν το site σας, στέλνοντας το στα τάρτατα των αποτελεσμάτων των μηχανών αναζήτησης.

* Προσπαθήστε να κερδίσετε backlinks από sites που τους αρέσει το περιεχόμενο σας και επιλέγουν να σας στηρίξουν ή από καταλόγους που θα το καταχωρήσετε και όχι από αγορασμένα link farms, link exchanges και άσχετα αμφιβόλου ποιότητας και αγνώστου ή ασχέτου περιερχομένου links.

* Οι εσωτερικοί σύνδεσμοι επίσης μπορούν να βοηθήσουν και τους επισκέπτες σας και τις μηχανές αναζήτησης στην ανεύρεση περισσότερου και σχετικού περιεχομένου. Για παράδειγμα tags, κατηγορίες, σχετικά άρθρα με αυτό που διαβάζει ο επισκέπτης, λίστα με προτεινόμενα άρθρα αλλά και links μέσα στα κείμενα σας που οδηγούν σε άλλα σχετικά άρθρα που έχουν δημοσιευτεί στο site σας, όλα αυτά βοηθάνε και τις μηχανές αναζήτησης αλλά και τους επισκέπτες σας.

* Κάντε σωστή δόμηση στο site σας. Φτιάξτε sitemap και προσθέστε στα Google Webmaster Tools τον χάρτη ιστοτόπου σας.

* Η σωστή markup χωρίς inline css και javascript, χωρίς tables για το layout, χωρίς πολλά nested divs, με ids, classes όπου πραγματικά χρειάζονται αλλά ακόμα και ένα σωστό, καλοσχεδιασμένο και προπαντός λειτουργικό εικαστικό και πλοήγηση, μπορούν επίσης να βοηθήσουν και στην κατάταξη αλλά κυρίως και στην αναγνώριση του sites σας από τους επισκέπτες σας και στην καλύτερη ταχύτητα φόρτωσης που επίσης πλέον λαμβάνεται υπόψη.

* Εφόσον μπορείτε να εφαρμόσετε μόνοι σας τα παραπάνω μη δώσετε τζάμπα χρήματα
στους απανταχού αυτοβαφτιζόμενους ειδικούς του SEO. Προτιμήστε να τα δώσετε για
διαφήμιση σε υπηρεσίες όπως τις Google Adwords, Facebook ads ή σε affiliate networks και websites που σχετίζονται με το δικό σας περιεχόμενο। Όλα αυτά μπορούν να βοηθήσουν την προώθηση του site σας ή να αυξήσουν τις πωλήσεις σας. Για παράδειγμα αν πουλάτε hardware για υπολογιστές, διαφημιστείτε σε sites τεχνολογικού περιεχομένου, αν πουλάτε ρούχα σε sites που γράφουν για την μόδα κ.ο.κ.

* Domain names. Δηλαδή η διευθύνση που θα γράφει κάποιος στον browser για να μπει στο site σας. Τι πρέπει να προσέξετε:

1) Προσπαθήστε να βρείτε και να κατοχυρώσετε ένα όσο το δυνατόν μικρότερο σε χαρακτήρες domain name, που να σχετίζεται με το αντικείμενο που θα ασχολείται το site σας. Αν έχει και keywords μέσα στο domain name ακόμα καλύτερα. Για παράδειγμα όταν γνωρίζετε ότι οι περισσότεροι χρήστες των μηχανών αναζήτησης για να βρουν ξενοδοχεία στην Μύκονο, ψάχνουν στην google "Mykonos hotels" και εσείς σκοπεύετε να φτιάξετε ένα site που θα παρουσιάζει όλα τα ξενοδοχεία τις Μυκόνου και απευθύνεστε κυρίως στο εξωτερικό, τότε τα ιδανικά domain names που μπορείτε να κατοχυρώσετε είναι τα: "Mykonos-hotels.com", "mykonoshotels.com" αλλά και σε άλλες καταλήξεις (TLD).

2) Αν το domain που κατοχυρώνετε αποτελείται από περισσότερες από μια λέξεις (σύνθετη) τότε καλό θα είναι να κατοχυρώσετε και το domain χωρίς κενό, αλλά και με παύλα ( - ) ανάμεσα τους. Για παράδειγμα αν θέλετε να κλείσετε το «Είμαι SEO» , καλό θα είναι να έχετε στην κατοχή σας και το "eimaiseo.gr" και το "eimai-seo.gr" . Μεγάλα brand names
κατοχυρώνουν τα domain name τους και σε άλλα TLD π.χ. "eimai-seo.com", "eimai-seo.net"

3) Έπειτα όταν θα ανεβάσετε το site χρησιμοποιείστε μια από τις κατοχυρωμένες διευθύνσεις και ρυθμίστε τις άλλες να κάνουν 301 redirect στην βασική.

4) Επίσης καλό είναι να αποφεύγονται ονόματα που όταν τα προφέρετε μπορεί να γραφτούν με πολλούς διαφορετικούς τρόπους. Για παράδειγμα αν συναντήσετε κάποιον φίλο στον δρόμο και σας πει ότι έφτιαξε ένα site στο «σούξουμούξου τελεία τζι αρ», σκεφτείτε με πόσους τρόπους μπορείτε να το γράψετε στην διεύθυνση του browser: souxoumouxou.gr, suxumuxu.gr, souxou-muxu.gr, suksou-mouksou.gr κλπ

5) Τέλος σε αρκετές μηχανές αναζήτησης μετράει και η παλαιότητα των domain names, οπότε όσο πιο παλιά έχει κατοχυρωθεί και είναι ενεργό ένα domain name τόσο πιο ευνοϊκά θα το αξιολογήσουν και οι μηχανές αναζήτησης. Σε αυτό το σημείο χρειάζεται προσοχή στις περιπτώσεις που αγοράζετε domain names που ήταν στην κατοχή άλλων χρηστών, θα πρέπει να ελέγχετε μήπως το domain αυτό είναι στις μαύρες λίστες των μηχανών αναζήτησης και γενικότερα το ιστορικό του.

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


Πηγή: log.gr