Λίγα λόγια από τους συγγραφείς του βιβλίου:

Σε ποιους απευθύνεται αυτό το Ebook

Σε αντίθεση με τους περισσότερους οδηγούς seo που κυκλοφορούν αυτή τη στιγμή στην Ελλάδα, δεν θα μπω στις περιττές και βαρετές λεπτομέρειες για το πώς να κάνετε onpage ή offpage seo, ούτε θα περιαυτολογήσω πάνω σε θεωρητικά κομμάτια, όπως τι είναι το seo, κλπ κλπ. Αυτή τη στιγμή υπάρχουν αμέτρητοι παρόμοιοι οδηγοί seo που μπορείτε να βρείτε στο Google, τόσο σε Ελλάδα, όσο και στο εξωτερικό.

• Affiliates.
• Επιχειρηματίες που έχουν ή σκοπεύουν να δημιουργήσουν μια online επιχείρηση.
• SEOists που θέλουν να μάθουν βελτιωμένες τακτικές.
• Ερασιτέχνες bloggers που θέλουν να εμφανίσουν την ιστοσελίδα τους σε υψηλότερες θέσεις.
• Marketers, οι οποίοι μόλις μπήκατε στο παιχνίδι του online PR και θέλετε να κερδίσετε από αυτό.

Μάθετε τις πιο αποτελεσματικές τακτικές link building, μέσα από το SEO βιβλίο μας (SEO Book)

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

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

Λίγα λόγια για τον συγγραφέα…

Πριν ξεκινήσω να σας αναλύω πως μπορείτε να κατακτήσετε την κορυφή του Google, καλό θα ήταν να πω δυο λόγια για το ποιος είμαι. Ονομάζομαι Αλέξανδρος Ίτσιος και είμαι ο ιδρυτής της SEO Projects, μιας επαγγελματικής εταιρίας προώθησης και βελτιστοποίησης ιστοσελίδων. Στη διάρκεια της καριέρας μου, έχω αναλάβει και επιτύχει πολυάριθμα seo projects.

Εκτός από την SEO Projects, συνεργάζομαι με τη StigmaHost και την e-xtnd.it. Είμαι επίσης ένας από τους διαχειριστές και ιδρυτικό μέλος του Ifeed.gr, της πρώτης ελληνικής κοινότητας internet marketing.  Θα με βρείτε συχνά να γράφω και σε άλλες κοινότητες, όπως το wordpress-gr.org (Ελληνική κοινότητα wordpress), το wdf.gr (web design forum) στα οποία επίσης είμαι διαχειριστής και στο w24.gr, ένα από τα κορυφαία ελληνικά forums για webmasters και internet marketers, στο οποίο και είμαι moderator.

Μπορείτε να κατεβάσετε το βιβλίο από εδώ

WordPress Ping Services

Το WordPress κάθε φορά που δημοσιεύουμε ένα νέο άρθρο “ειδοποιεί” κάποιες ιστοσελίδες (όπως το Techonarati για παράδειγμα) πως υπάρχει νέο υλικό στο blog μας. Μέσω αυτής της διαδικασίας μειώνεται στο ελάχιστο ο χρόνος που θα χρειαστούν οι μηχανές αναζήτησης να εντοπίσουν το νέο άρθρο και να το εμφανίζουν στα αποτελέσματά τους.

Εδώ ας κάνουμε μία μικρή παρένθεση, ξεκαθαρίζοντας πως το Wordress (ή και κάποιες ιστοσελίδες που κάνουν ping όπως το ping-o-matic) δεν καταχωρεί το νέο σας υλικό στις μηχανές αναζήτησης! Πολλοί μπερδεύονται και αν διαβάσατε κάπου κάτι αντίστοιχο να έχετε υπόψη πως δεν ισχύει. Αυτό που κάνει το WordPress και οι αντίστοιχες ιστοσελίδες είναι να ειδοποιεί κάποια μεγάλα directories πως υπάρχει νέο υλικό ώστε μπείτε στην λίστα για να επισκεφτεί το robot και να κάνει index την νέα σας σελίδα.

Για να δείτε ποια services χρησιμοποιεί το WordPress αρκεί να μεταβείτε το μενού Ρυθμίσεις -> Σύνταξη. Εκεί θα βρείτε το πεδίο με το όνομα Ενημέρωση υπηρεσιών που μπορείτε να προσθέσετε εσείς όποια υπηρεσία θέλετε. Ακολουθεί μια προτεινόμενη λίστα υπηρεσιών που θα σας καλύψει

(απλά κάντε την αντιγραφή και επικόλληση και στο τέλος πατήστε στο κουμπί Αποθήκευση αλλαγών).

http://xping.pubsub.com/ping
http://www.blogdigger.com/RPC2
http://topicexchange.com/RPC2
http://rpc.weblogs.com/RPC2
http://rpc.technorati.com/rpc/ping
http://rpc.icerocket.com:10080/
http://rpc.blogrolling.com/pinger
http://pinger.blogflux.com/rpc
http://ping.weblogalot.com/rpc.php
http://ping.syndic8.com/xmlrpc.php
http://ping.cocolog-nifty.com/xmlrpc
http://ping.bloggers.jp/rpc
http://ping.blo.gs/
http://coreblog.org/ping
http://blogdb.jp/xmlrpc/
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://api.feedster.com/ping
http://blogsearch.google.com/ping/RPC2
http://api.my.yahoo.com/rss/ping
http://ping.feedburner.com
http://1470.net/api/ping
http://api.my.yahoo.com/RPC2
http://bblog.com/ping.php
http://bitacoras.net/ping
http://blogbot.dk/io/xml-rpc.php
http://blogmatcher.com/u.php
http://bulkfeeds.net/rpc
http://mod-pubsub.org/kn_apps/blogchatt
http://mod-pubsub.org/knapps/blogchatt
http://ping.amagle.com
http://ping.bitacoras.com
http://ping.blogmura.jp/rpc
http://ping.exblog.jp/xmlrpc
http://ping.myblog.jp
http://ping.rootblog.com/rpc.php
http://ping.weblogs.se
http://rcs.datashed.net/RPC2
http://thingamablog.sourceforge.net/ping.php
http://trackback.bakeinu.jp/bakeping.php
http://www.a2b.cc/setloc/bp.a2b
http://www.bitacoles.net/ping.php
http://www.blogoole.com/ping
http://www.blogoon.net/ping
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogroots.com/tbpopuli.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.lasermemory.com/lsrpc
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.mod-pubsub.org/knapps/blogchatter/ping.php
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/addsite.php
http://www.snipsnap.org/RPC2
http://www.weblogues.com/RPC
http://xmlrpc.blogg.de
http://holycowdude.com/rpc/ping/
http://pingoat.com/goat/RPC2
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.newsgator.com/
http://api.my.yahoo.co.jp/RPC2
http://audiorpc.weblogs.com/RPC2
http://blog.goo.ne.jp/XMLRPC
http://blogpeople.net/ping
http://blogsearch.google.ae/ping/RPC2
http://blogsearch.google.at/ping/RPC2
http://blogsearch.google.be/ping/RPC2
http://blogsearch.google.bg/ping/RPC2
http://blogsearch.google.ca/ping/RPC2
http://blogsearch.google.ch/ping/RPC2
http://blogsearch.google.cl/ping/RPC2
http://blogsearch.google.co.cr/ping/RPC2
http://blogsearch.google.co.hu/ping/RPC2
http://blogsearch.google.co.id/ping/RPC2
http://blogsearch.google.co.il/ping/RPC2
http://blogsearch.google.co.in/ping/RPC2
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.co.ma/ping/RPC2
http://blogsearch.google.co.nz/ping/RPC2
http://blogsearch.google.co.th/ping/RPC2
http://blogsearch.google.co.uk/ping/RPC2
http://blogsearch.google.co.ve/ping/RPC2
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.ar/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.co/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.mx/ping/RPC2
http://blogsearch.google.com.my/ping/RPC2
http://blogsearch.google.com.pe/ping/RPC2
http://blogsearch.google.com.sa/ping/RPC2
http://blogsearch.google.com.sg/ping/RPC2
http://blogsearch.google.com.tr/ping/RPC2
http://blogsearch.google.com.tw/ping/RPC2
http://blogsearch.google.com.ua/ping/RPC2
http://blogsearch.google.com.uy/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://blogsearch.google.de/ping/RPC2
http://blogsearch.google.es/ping/RPC2
http://blogsearch.google.fi/ping/RPC2
http://blogsearch.google.fr/ping/RPC2
http://blogsearch.google.gr/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.it/ping/RPC2
http://blogsearch.google.jp/ping/RPC2
http://blogsearch.google.lt/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://blogsearch.google.pt/ping/RPC2
http://blogsearch.google.ro/ping/RPC2
http://blogsearch.google.ru/ping/RPC2
http://blogsearch.google.se/ping/RPC2
http://blogsearch.google.sk/ping/RPC2
http://blogsearch.google.us/ping/RPC2
http://hamo-search.com/ping.php
http://ping.bloggnytt.se
http://ping.blogs.yandex.ru/RPC2
http://ping.kutsulog.net/
http://ping.namaan.net/rpc
http://rpc.aitellu.com
http://rpc.bloggerei.de/ping/
http://rpc.blogrolling.com/pinger/
http://rpc.reader.livedoor.com/ping
http://rpc.twingly.com/
http://xianguo.com/xmlrpc/ping.php
http://xping.pubsub.com/ping/
http://zhuaxia.com/rpc/server.php
http://blogsearch.google.co.it/ping/RPC2
http://blogsearch.google.in/ping/RPC2
http://blogsearch.google.tw/ping/RPC2
http://feedsky.com/api/RPC2
http://ping.blogoon.net
http://ping.fc2.com
http://ping.snap.com/ping/RPC2
http://ping.wordblog.de
http://r.hatena.ne.jp/rpc
http://rpc.technorati.jp/rpc/ping
http://wasalive.com/ping/
http://www.newsisfree.com/RPCCloud

Πως θα δημιουργήσετε Sitemaps στο WordPress

Τα Sitemaps είναι λίστες που περιέχουν όλες τις σελίδες από μια ιστοσελίδα. Με αυτό τον τρόπο οι μηχανές αναζήτησης μπορούν να περιηγηθούν στο blog σας χωρίς να παραλείψουν κάποια από τις σελίδες σας. Κάθε ιστοσελίδα θα πρέπει να περιέχει ένα sitemap σε μορφή xml αρχείου. Υπάρχουν διάφορα plugins που κάνουν αποκλειστικά και μόνο αυτή τη δουλειά όπως το Google XML Sitemaps.

Εμείς για χρησιμοποιήσουμε το plugin Yoast SEO. Το Yoast SEO είναι ένα plugin που περιέχει όλες τις βασικές SEO ρυθμίσεις που χρειάζεται ένα blog. Και αναλυτικότερα θα ασχοληθούμε μαζί του στο επόμενο tutorial. Σήμερα απλά θα το ρυθμίσουμε να διαχειρίζεται τα sitemaps του blog μας. Εγκαθιστούμε λοιπόν το Yoast SEO και αφού το ενεργοποιήσουμε από το μενού διαχείρισης στα αριστερά πατάμε στο SEO -> XML Sitemaps, βάζουμε τικ στο κουτάκι ώστε να εμφανιστούν και οι υπόλοιπες ρυθμίσεις του:

Στην κατηγορία General Settings μας ρωτάει αν θέλουμε αν θέλουμε μετά από κάθε δημοσίευση, το Yoast να ειδοποιεί τις σελίδες Yahoo! Και Ask πως υπάρχει κάποια αλλαγή στο site μας (δηλαδή να κάνει ping προς αυτές, όπως αναφέραμε παραπάνω!). Καλό είναι να ενεργοποιήσετε και τις δύο επιλογές.

Στην κατηγορία Exclude post Types μπορούμε να επιλέξουμε αν θέλουμε κάποιο είδος άρθρων (post type) μην συμπεριλαμβάνεται στα sitemaps της σελίδας μας (διαβάστε περισσότερα για τα post types στο Codex του WordPress). Δεν ενεργοποιούμε καμία από τις δύο επιλογές!

Τέλος το Yoast μας ρωτάει αν θέλουμε να μην συμπεριλαμβάνει τις Κατηγορίες και τις Ετικέτες μας στα sitemaps του. Και αυτό το αφήνουμε ως έχει χωρίς να επιλέξουμε κάτι.
Τέλος πατάμε Save Settings και είμαστε έτοιμοι! Για να δείτε το κεντρικό sitemap αρκεί να επισκεφτείτε την διεύθυνση http://todomainsas.com/sitemap_index.xml
Αυτά για σήμερα! Στο επόμενο tutorial θα δούμε πως θα ρυθμίσουμε το Yoast SEO. Αν παρατηρήσετε έχει πάρα πολλές ρυθμίσεις, αλλά μην ανησυχείτε θα τις εξετάσουμε μία προς μία αναλυτικά!

Στο πρώτο μέρος της σειράς WordPress SEO δε θα ασχοληθούμε καθόλου με το WordPress. Είναι πολύ πιο σημαντικό να καταλάβετε τι είναι το SEO και πως λειτουργούν οι μηχανές αναζήτησης. Εξάλλου αν δεν γνωρίζετε πως λειτουργεί ο «εχθρός» σας πως περιμένετε να τον νικήσετε;

Γιατί όμως επιλέγουμε το WordPress σαν ιδανικό για SEO; Γιατί το WordPress προσφέρει μερικές από τα βασικά χαρακτηριστικά που οι μηχανές αναζήτησης λατρεύουν, όπως εύκολη περιήγηση (navigation), φιλικά προς τις μηχανές αναζήτησης urls (SEO friendly urls), εύκολες λειτουργίες όσων αφορά την συγγραφή άρθρων, ενσωματωμένα ping services, καθώς και άλλα πάρα πολλά που θα τα δούμε αναλυτικά στο μέλλον.

Αν στην παραπάνω παράγραφο έχετε άγνωστες λέξεις τότε υπομονή! Εισαγωγή τέλος, ξεκινάμε!

Τι είναι το SEO;

Ο όρος SEO προέρχεται από τα αρχικά των λέξεων Search Engine Optimization ή αλλιώς στα ελληνικά Βελτιστοποίηση (Ιστοσελίδων) για τις Μηχανές Αναζήτησης. Το SEO λοιπόν είναι οι διαδικασίες και οι επεμβάσεις που γίνονται σε μια ιστοσελίδα με σκοπό να είναι καλύτερα ορατή στις μηχανές αναζήτησης ώστε να εμφανίζεται υψηλότερα στα αποτελέσματα τους και φυσικά έτσι να επέλθει η πολυπόθητη αύξηση επισκεπτών.

Το SEO πολλές φορές μπερδεύεται εντέχνως από τις εταιρείες που το παρέχουν με το Search Engine Marketing (SEM). Το μάρκετιγνκ μέσω των μηχανών αναζήτησης είναι κάτι το τελείως διαφορετικό! Το SEM είναι η τοποθέτηση διαφημίσεων (φωτογραφίες, links κλπ.) με πληρωμή. Αυτό μπορεί να γίνει είτε μέσω εταιρειών που προσφέρουν αυτές της υπηρεσίες (πχ. Adwords) είτε σε συνεννόηση με τους ιδιοκτήτες σελίδων απευθείας (πχ. Paid links κλπ.). Το SEM και το SEO μπορούν να συνυπάρξουν αλλά δεν είναι το απαραίτητο αυτό. Εμείς θα ασχοληθούμε με το SEO μόνο, δηλαδή δε θα ασχοληθούμε με το πώς θα διαφημίσετε την σελίδα σας.

Παράγοντες που επηρεάζουν την θέση σας στις μηχανές αναζήτησης

Το SEO χωρίζεται από τους ειδικούς σε τρεις μεγάλες κατηγορίες, on-page optimization, of-page βελτιστοποίηση και conversion. Με τον όρο on-page optimization (βελτιστοποίηση εντός της σελίδας) εννοούμε τα κείμενα, τις φωτογραφίες, τον κώδικα και την δομή της σελίδας σας. Ο όρος of-page optimization αναφέρεται σε όλους τους παράγοντες που επηρεάζουν την κατάταξη της σελίδας σας αλλά βρίσκονται εκτός αυτής. Στις περισσότερες περιπτώσεις με τον όρο βελτιστοποίησης εκτός σελίδας εννοούμε τους εισερχόμενους συνδέσμους προς εσάς από άλλες ιστοσελίδες και τα κοινωνικά δίκτυα (όπως το Facebook, Twitter, Google Plus κλπ.). Με τον όρο conversion (μετατροπή) αναφέρεται στο πόσο αποτελεσματική είναι η ιστοσελίδα σας στο να προκαλέσει τους χρήστες να προβούν σε μια πράξη (για παράδειγμα, να ολοκληρώσουν μια πώληση, να πατήσουν σε μία διαφήμιση, και επικοινωνήσουν μαζί σας ή οτιδήποτε άλλο έχετε θέσει εσείς ως στόχο).

Παράγοντες στην ιστοσελίδα σας που επηρεάζουν το SEO

• Το κυρίως κείμενο που βρίσκεται στην σελίδα.
• Το title tag καθώς και τα meta tags keywords και description.
• Οι κεφαλίδες (h1, h2, h3 tags).
• Ο κώδικας της σελίδας (html και css). Πόσο καθαρογραμμένος και σωστά δομημένος είναι.
• Οι φωτογραφίες που βρίσκονται στην σελίδα, το όνομά τους και η χρήση του alt tag.
• Διάφορα χαρακτηριστικά στα κείμενα σας όπως μαυρισμένες λέξεις (bold), οι υπογραμμισμένες (underline) και η χρήση της πλάγιας γραφής (italic).
• Η χρήση των rel dofollow και nofollow στους συνδέσμους σας.
• Το μέγεθος των αρχείων την σελίδας σας (στις φωτογραφίες για παράδειγμα) και ο χρόνος πως κάνει για να φορτώσει η σελίδα.
• Ο συνολικός αριθμός των σελίδων που αποτελείται η ιστοσελίδα σας.
• Η συχνότητα με την οποία ανανεώνεται η ιστοσελίδα σας.
• Τέλος, το πώς αντιλαμβάνονται τα κοινωνικά δίκτυα την σελίδα σας.

Το καθένα από αυτά έχει διαφορετική βαρύτητα. Σίγουρα κάθε σελίδα θα πρέπει να κάνει σωστή χρήση των meta tags, να περιέχει φωτογραφίες με λέξεις κλειδιά στο όνομα και στο alt tag και να μην αργεί να φορτώσει! Θα αναφερθούμε σε αυτά αναλυτικά στο δεύτερο μέρος της σειράς.

Παράγοντες εκτός της σελίδας σας

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

Οι εξωτερικοί σύνδεσμοι πως την σελίδα σας (γνωστά και ως backlinks) και η δημιουργία τους είναι μια διαδικασία που θεωρητικά δε σταματάει ποτέ. Όσο περισσότερο χτίζετε backlinks για την ιστοσελίδα σας τόσο καλύτερα. Φυσικά δεν είναι τόσο απλό! Μην ανησυχείτε όμως θα μάθετε τι πρέπει να προσέχετε, ποιο παράγοντες παίζουν σημαντικό ρόλο και πώς να χτίσετε συνδέσμους προς την σελίδα σας με τον σωστό τρόπο.

Αυτά για σήμερα! Στο επόμενο μέρος θα δούμε ποια είναι η διαδικασία για να ορίσετε τους σωστούς στόχους για να πετύχει η ιστοσελίδα σας, ποιες είναι οι έτοιμες λειτουργίες για το SEO που μας δίνει το WordPress αλλά τι δε μπορεί να κάνει το WordPress για εμάς!

Δημιουργούμε τον καμβά μας

Ανοίγουμε τον αγαπημένο μας text editor (για παράδειγμα το Notepad++) και δημιουργούμε ένα νέο αρχείο HTML. Γράφουμε μέσα στο body τον παρακάτω κώδικα:

Αφού σώσουμε την σελίδα ώς index.html για παράδειγμα, έχουμε δημιουργήσει το περιβάλλον στο οποίο θα βρίσκεται ο καμβάς μας. Συνεχίζουμε γράφοντας μέσα στο head της σελίδας μας τον παρακάτω κώδικα:

%MINIFYHTML9c34685c6746feda9e3c3b41b560b1c10%%MINIFYHTML9c34685c6746feda9e3c3b41b560b1c11%

Έτσι εισάγουμε την jQuery στην σελίδα μας, και “καλούμε” το στοιχείο canvas που δημιουργήσαμε μέσα από την βιβλιοθήκη. Προσοχή, ο javascript κώδικας που γράψαμε στο head, χρειάζεται οπωσδήποτε το στοιχείο canvas που γράψαμε στο body, για να δουλέψει. Από μόνος του δεν κάνει τίποτα.

Ας ζωγραφίσουμε

Στο head μας, αλλάζουμε τον κώδικα στον παρακάτω κώδικα

var ctx = canvas.getContext("2d");
	// Ζωγραφίζουμε τον σταυρό
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 0, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(50, 0, 25, 50);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(75, 0, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 50, 125, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 75, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(50, 75, 25, 50);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(75, 75, 50, 50);
	// Ζωγραφίζουμε τις ρίγες
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 0, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(125, 25, 280, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 50, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(125, 75, 280, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 100, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 125, 400, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 150, 400, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 175, 400, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 200, 400, 25);
});

O παραπάνω κώδικας μας δίνει το εξής αποτέλεσμα

Ας δούμε λοιπόν τι ακριβώς γίνεται στον παραπάνω κώδικα.

Για να ζωγραφίσουμε παραλληλόγραμμα χρησιμοποιούμε την εντολή:

fillRect(x,y,width,height)

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

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

ctx.fillStyle = "#0873a5"

στην οποία δίνουμε σε δεκαεξαδική ή rgb μορφή τον κωδικό του χρώματος.

Τέλος αν θέλουμε να προσθέσουμε και περίγραμμα γύρω από το παραλληλόγραμμο μας χρησιμοποιούμε την εντολή:

strokeRect(x,y,width,height)

με την οποία δίνουμε συντεταγμένες για το που ακριβώς θα ζωγραφιστεί το border.

Χρησιμοποιώντας και επιπλέον εντολές όπως στην λίστα παρακάτω μπορούμε να δημιουργήσουμε rounded corners στα borders μας, με διαφορετικό χρώμα, και διαφορετικό πάχος.

  var rectX = 10;
  var rectY = 10;
  var rectWidth = 100;
  var rectHeight = 100;
  var cornerRadius = 15;
  context.lineJoin = "round";
  context.lineWidth = cornerRadius;
  context.strokeStyle = "rgb(0, 128, 0)";
  context.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2),
  rectWidth-cornerRadius, rectHeight-cornerRadius);

Διαβάστε περισσότερα για το στοιχείου canvas σε μια από τις καλύτερες ιστοσελίδες για τεχνικά θέματα της HTML5, το DiveIntoHTML5

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

Η Ύλη του Σεμιναρίου

Το σεμινάριο θα διαρκέσει 6 ώρες συνολικά και θα διεξαχθεί 3 διαδοχικά Σάββατα του Οκτωβρίου. Αναλυτικότερα στα 3 διαφορετικά Sessions θα δούμε:

Session 1  (Σάββατο 22/10/2011 Ώρα: 18:00)

• Προαπαιτούμενα για την ανάπτυξη εφαρμογών.
• Γνωριμία με το Xcode: Βασικές κατηγορίες εφαρμογών,ξενάγηση  στο περιβάλλον του Xcode, επεξήγηση των συστατικών μίας εφαρμογής.
• Hello World Application,επεξήγηση ModalViewController model και χρήση κουμπιών,Labels,textfield.

Session 2  (Σάββατο 29/10/2011 Ώρα: 18:00)

• Δημιουργία MultiView Application ( πολλαπλών οθονών)
• Χρήση Table για εμφάνιση λίστας δεδομένων. (πχ Contacts του iPhone)

Session 3   (Σάββατο 4/11/2011 Ώρα: 18:00)

• Χρήση Navigation για πλοήγηση μεταξύ διαφορετικών οθονών (πχ Contacts του iPhone)
• Χρήση Tabbar για εμφάνιση πολλαπλών οθονών (πχ Phone του iPhone)

Το κόστος συμμετοχής στο σεμινάριο είναι 33€ η μέρα, δηλαδή 16,50€ την ώρα για live παρακολούθηση την ώρα που θα διαξέγεται. Έτσι θα έχετε την δυνατότητα στο τέλος να κάνετε ερωτήσεις, και να πάρετε απαντήσεις σε απορίες που μπορεί να σας δημιουργηθούν κατά την διάρκεια του σεμιναρίου.

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

Εισηγητής του σεμιναρίου είναι ο Γιώργος Τερμετζόγλου, ο οποίος είναι σχεδιαστής και προγραμματιστής iPhone και iPad Applications.

Διαλέξτε τώρα το πακέτο συμμετοχή που σας συμφέρει και μάθετε πως θα αναπτύξετε μία πλήρως λειτουργική εφαρμογή για iPhone ή iPad.

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

Η διαδικασία είναι απλή. Πρώτα από όλα πρέπει να έχετε λογαριασμό email στο Gmail.  Αν δεν έχετε μπορείτε να δημιουργήσετε έναν δωρεάν. Μετά απλά να αφήσετε ένα σχόλιο λέγοντας μας το email σας και εμείς θα σας κάνουμε invite στον νέο κόσμο του Google+. Καλό networking !

Διαβάστε περισσότερα για το 960 Grid System και το πως μπορείτε να το εκμεταλλευτείτε

Κατεβάστε το 960GS

Χρήσιμα links

Κατεβάστε και εσείς τα παραπάνω tools και plugins και κάντε την δουλειά σας πιο εύκολα

Firebug

http://getfirebug.com/

Web Developer ToolBar

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Dust-Me Selector

https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/

YSlow

https://addons.mozilla.org/en-US/firefox/addon/yslow/

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

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

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

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

Πακέτα Εκπαιδεύσεων

Σας προσφέρουμε 2 διαφορετικά πακέτα συμμετοχής στις εκπαιδεύσεις, για να διαλέξετε αυτό που σας συμφαίρει και σας βολέυει.

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

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

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

Σε αυτό το κεφάλαιο θα μάθουμε για πάντα για το WordPress. Από το πως θα στήσουμε ένα δικό μας απλό blog, μέχρι πως θα δημιουργήσουμε μια κομψή και περίπλοκη ιστοσελίδα χρησιμοποιώντας το WordPress. Τέλος θα δούμε την δομή ενός θέματος και ενός plugin και θα μάθουμε τα βασικά για την δημιουργία του δικού σας θέματος και του δικού σας Plugin.

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

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

[contact-form-7]

Τα cookies είναι μικρά αρχεία κειμένου, που αποθηκεύονται στον υπολογιστή μας όταν σερφάρουμε στο διαδίκτυο. Αυτά τα αρχεία βοηθούν τις ιστοσελίδες να “θυμούνται” κάποιες ρυθμίσεις που έχουμε κάνει, ή κάποια προτίμηση μας στην εκάστοτε ιστοσελίδα. Για παράδειγμα, μια ιστοσελίδα μπορεί να έχει εναλλασόμενες εικόνες παρασκηνίου. Έτσι κάθε φορά που αλλάζουμε εικόνα, αποθηκεύεται ένα cookie με την εικόνα που επιλέξαμε, και έτσι κάθε φορά που φορτώνουμε μια σελίδα από την συγκεκριμένη ιστοσελίδα, διαβάζει τα στοιχεία του cookie, και εφαρμόζει το τελευταίο μας background.

Ο Παραδοσιακός τρόπος

Με την χρήση javascript, μπορούμε να δημιουργήσουμε cookies για οποιαδήποτε χρήση. Ο παραδοσιακός τρόπος δημιουργίας είναι γράφοντας

document.cookie = 'name=value; expires=Thu, 2 Aug 2008 20:00:00 UTC; path=/'

jQuery Cookies

Με την χρήση του plugin Cookie της βιβλιοθήκης jQuery, μπορούμε να δημιουργήσουμε cookies, με πιο απλή σύνταξη, και πιο εύκολη διαδικασία. Δείτε τον παρακάτω κώδικα και συγκρίνετε τον με τον αντίστοιχο της κλασσικής javascript πιο πάνω

$.cookie('myCookie', 'blue', { expires: 2 });

O παραπάνω κώδικας, δημιουργεί ένα cookie ονόματι “myCookie”, του δίνει την τιμή “blue” και του βάζει ημερομηνία λήξης τις 2 ημέρες.

Άλλες λειτουργίες με τα cookies

Με την παρακάτω γραμμή κώδικα μπορούμε να διαβάσουμε την τιμή που έχει μέσα το cookie που έχουμε δημιουργήσει

$.cookie('myCookie');

ενώ με τον παρακάτω κώδικα μπορούμε να του δώσουμε νέα τιμή

$.cookie('myCookie', 'blue');

Τέλος με τον παρακάτω κώδικα μπορούμε να διαγράψουμε την τιμή που έχει μέσα το cookie μας

$.cookie('myCookie', null);

Παράδειγμα

Δείτε μια live επίδειξη της χρήσης των cookies

Μπορείτε να κατεβάσετε και να χρησιμοποιήσετε και εσείς το plugin Cookie από την σελίδα http://github.com/carhartl/jquery-cookie