Οι συντομεύσεις αυτές έρχονται σε μορφή plugin για τον editor της επιλογής μας, και υποστηρίζουν μια μεγάλη γκάμα editors όπως το Dreamweaver, το Notepad++, τον Coda (για Mac) και πολλούς πολλούς άλλους.

Πρώτο πράγμα που πρέπει να κάνουμε λοιπόν είναι να εγκαταστήσουμε το πρόσθετο στον editor που χρησιμοποιούμε. Αυτό το κάνουμε αφού επισκεφτούμε τον επίσημο χώρο της Google στον οποίο φιλοξενείται το project http://code.google.com/p/zen-coding/.

Από την σελίδα Downloads, κατεβάζουμε το πρόσθετο για τον δικό μας editor, και μετά κάνουμε εγκατάσταση. Συνήθως οι οδηγίες για τα πρόσθετα στους editors είναι αρκετά απλές. Για παράδειγμα στον Notepad++ απλά πρέπει να εγκαταστήσουμε το πρόσθετο μέσα από τον plugin manager που διαθέτει.

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

Για αρχή έχουμε το άδειο document μας

Γράφουμε την δομή που θέλουμε να δημιουργήσουμε

Και voila! Έτοιμος ο κώδικας μας

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

Στο άδειο document μας γράφουμε τις συντομεύσεις για τον κώδικα που θέλουμε να δημιουργήσουμε, με την δομή του Zen Coding. Δηλαδή ξεκινάμε να γράφουμε

div#main>div.wrapper>div.head>nav>ul>li*5>a

Αυτός ο κώδικας αν τον διαβάσουμε σημαίνει ότι θέλουμε να δημιουργήσουμε ένα div με ID=main, μέσα του να έχει ένα div με Class=wrapper, μέσα του ένα div με Class=head και τέλος μέσα του ένα nav tag με μια unordered list, με 5 list items που θα περιέχουν anchor tags.

Το επόμενο βήμα είναι να πατήσουμε Ctrl+E (στο Notepad++) και αυτόματα το plugin του Zen Coding αναλαμβάνει να δημιουργήσει τον κώδικα για εμάς.

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

Έτσι για να δούμε μερικά ακόμα παραδείγματα κώδικα με το Zen Coding, αν θέλουμε να φτιάξουμε  την δομή

<table><tr>    <td></td></tr></table>

Γράφουμε απλά

table+

Αν θέλουμε να φτιάξουμε την δομή

<div id="name">    <p class="one"></p>    <p class="two"></p></div>

Γράφουμε απλά

div#name>p.one+p.two

Αν θέλουμε να φτιάξουμε την δομή

<select>    <option id="item-1"></option>    <option id="item-2"></option>    <option id="item-3"></option></select>

Γράφουμε απλά

select>option#item-$*3

και μετά από κάθε συντόμευση πατάμε το shortcut του Zen Coding για να μας δημιουργήσει αυτόματα τον κώδικα που θέλουμε! Αν παρατηρήσατε στο τελευταίο παράδειγμα, μπορούμε ακόμα να βάλουμε και μια μεταβλητή που θα αυξάνεται μόνη της με αποτέλεσμα να μας δίνει έναν αύξοντα αριθμό στις κλάσεις ή στα id που θέλουμε.

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

Εσείς χρησιμοποιείτε το Zen Coding; Αν όχι, πως σας φαίνεται; Θα το δοκιμάσετε;

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

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

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

%MINIFYHTMLfbe196165c0ac342f8ed8897a5c708b60%%MINIFYHTMLfbe196165c0ac342f8ed8897a5c708b61%

Έτσι εισάγουμε την 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; Περιμένουμε στα σχόλια να δούμε τις δικές σας δοκιμές.

type=”email” και type=”url”

Το πεδίο αυτό
είναι το email που, όπως όλα τα καινούργια inputs συμπεριφέρεται σαν type="text"σε όσους browsers δεν υποστηρίζεται. Θα δοκιμάσουμε να δώσουμε το παρακάτω (όχι πολύ όμορφο!) στυλ και θα περιμένουμε να αποκτήσει ένα εκτυφλωτικό πράσινο border σε όλους τους σύγχρονους browsers.

input[type="text"]	{ border:1px solid #f00; }
input[type="email"],
input[type="number"],
input[type="range"],
input[type="search"],
input[type="url"]	{ border:1px solid #0f0; }

Firefox 4–5, Chrome 12, Opera 11, Internet Explorer 9 και -περιέργως- 8 μια χαρά, στον Internet Explorer 7 το border είναι κόκκινο. Δουλεύει περίπου όπως μας υποσχέθηκαν! Θα περίμενα να εμφανιστεί το κόκκινο border και στον IE 8 αλλά, φαίνεται πως ναι μεν δεν αναγνωρίζει το attribute type="email" αλλά του δίνει το κατάλληλο στυλ. Ο IE 7 «δημιουργεί» ένα type="text" attribute που είναι το default type για τα inputs και του δίνει τα αντίστοιχα στυλ.

Το ίδιο συμβαίνει και στο πεδίο url:

type="number"

Το number
συμπεριφέρεται με τον ίδιο τρόπο — πράσινο border σε όλους τους browsers, κόκκινο στον IE 7. Ο Chrome και ο Opera προσθέτουν 2 άσχημα μικρά κουμπιά-βελάκια στην δεξιά άκρη του πεδίου για τον έλεγχο της τιμής του, ενώ μπορoύμε α αλλάξουμε αυτή την τιμή και με τα βελάκια του πληκτρολογίου· αυτά όμως είναι ήδη καταγεγραμμένα, δεν έχει μείνει κάτι να προσθέσω!

type="range"

input[type="range"] {
	border:0 none;
	background-color:#009;
	color:#fff;
	width:60px;
	height:16px;
}

Το border δεν το χρειαζόμαστε — άλλωστε δεν εμφανίζεται καν σε Chrome και μάλλον είναι καλύτερα έτσι. Το background-color αγνοείται από τους browsers που σχεδιάζουν sliders αντί για inputs, όπως επίσης και το color, αφού δεν υπάρχει κείμενο να πάρει χρώμα. Οι περισσότεροι browsers σέβονται τις διαστάσεις που ζήτησα εκτός από τον Chrome που αδιαφορεί για το ύψος. Στον Opera βέβαια το ύψος ενδέχεται να δημιουργήσει πρόβλημα αφού μπορεί το χειριστήριο να γίνει τόσο μικρό που να είναι άχρηστο! Η γνώμη μου είναι -ντρέπομαι που το λέω- να χρησιμοποιήσετε jQuery UI για αυτή τη δουλειά (ή κάποιο άλλο Javascript) αφού οι διαφορές δεν είναι μόνο οπτικές αλλά και λειτουργικές.

type="date"

Για την ακρίβεια, όχι μόνο date αλλά και διάφορες παραλλαγές ημερομηνίας και ώρας. Ξεχάστε το καλύτερα, μόνο ο Opera κάνει κάτι χρήσιμο με αυτά τα πεδία ενώ ο Chrome εμφανίζει τα άσχημα μικρά βελάκια του number που δεν βοηθούν καθόλου στη συμπλήρωση του πεδίου. Καλύτερα να μείνουμε στην Javascript για λίγο ακόμα.

type="search"

Το search
δεν έχει κάποια ιδιαιτερότητα εκτός από το x που εμφανίζεται στην δεξιά μεριά σε Webkit browsers και μου επιτρέπει να καθαρίσω το πεδίο.

type="color"

Επίλογος

Μπορούμε από τώρα, άφοβα, να εντάξουμε τα email, url, number και search στον κώδικά μας αφού είναι σίγουρο πως οι browsers σιγά-σιγά θα χρησιμοποιήσουν αυτά τα πεδία για να διευκολύνουν τον χρήστη, όπως π.χ. κάνει το iOS με τα email, url και number, ενώ δεν δημιουργούν προβλήματα σε παλιότερους browsers. Χρειάζεται λίγες γραμμές παραπάνω CSS αλλά αυτό δεν είναι πρόβλημα. Για τα υπόλοιπα πεδία, range, date (και παραλλαγές) και color, εγώ δηλώνω μάλλον επιφυλακτικός αφού η εμφάνιση διαφέρει πολύ από browser σε browser και ίσως τελικά να χρειαστείτε περισσότερη Javascript. Ίσως να είναι νωρίς ακόμα, θα δούμε!

Σε μια προσπάθεια να κάνουμε πιο κατανοητά και διακριτά τα βήματα που χρειάζεται να ακολουθηθούν, αλλά και τις γνώσεις που χρειάζονται, για την δημιουργία μιας ιστοσελίδας, από την σκέψη μέχρι την υλοποίηση και την συντήρηση, προσφέρουμε σε όλους τους επισκέπτες μας μια σειρά από προσωπικούς 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]

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

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

Ο σωστός τρόπος λοιπόν να το κάνουμε αυτό είναι ο εξής:

Ανοίγουμε τον κώδικα της σελίδας μας και βρίσκουμε το <head> μέρος στην κορυφή του HTML κώδικα μας.

Εκεί θα προσθέσουμε τις παρακάτω γραμμές

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('a.email').each(function(i) {
var text = $(this).text();
var address = text.replace("*[se]*", "@");
$(this).attr('href', 'mailto:' + address);
$(this).text(address);
});
});
</script>

Το μόνο που έχουμε να κάνουμε τώρα, είναι να γράψουμε το email μας με την μορφή

διεύθυνση*[se]*domain.gr

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

Με την γραμμή

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"  />

καλούμε την jQuery στην σελίδα μας

Με την γραμμή

$(document).ready(function() {

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

Με την γραμμή

$('a.email').each(function(i) {

επιλέγουμε κάθε <a> tag που έχει class=”email”

Με τις γραμμές

var text = $(this).text();
var address = text.replace("*[se]*", "@");

δημιουργούμε 2 νέες μεταβλητές (text και address) και κάνουμε την μετατροπή των χαρακτήρων *[se]* σε παπάκι (@)

Με τις γραμμές

$(this).attr('href', 'mailto:' + address);
$(this).text(address);

προσθέτουμε τα χαρακτηριστικά href, mailto και την διεύθυνση στο link μας.

Έτσι λοιπόν ο παραπάνω κώδικας, ψάχνει τα <a class=”email”> tags που βρίσκονται στην σελίδα μας, και μετατρέπει τους χαρακτήρες *[se]* σε παπάκι (@).

Με άλλα λόγια, όπου εμείς γράψουμε διεύθυνση*[se]*domain.gr η jQuery θα αναλάβει να το μετατρέψει σε διεύθυνση@domain.gr μόλις φορτώσει η σελίδα

Δοκιμάστε το και εσείς και ίσως ξενοιάσετε από τα ενοχλητικά spam emails.

TIP: Μπορείτε να αλλάξετε το *[se]* σε ότι συνδιασμό χαρακτήρων θέλετε αλλά μετά τα email στον HTML κώδικα σας θα πρέπει να τα μετατρέψετε αναλόγως.

Βήμα 1

Σχεδιάζουμε στο Photoshop (ή σε όποιο άλλο πρόγραμμα της αρεσκείας μας) τις δύο εικόνες που θα χρησιμοποιήσουμε ως παρασκήνιο στα κουμπιά μας

Δημιουργούμε ένα νέο κενό έγγραφο διαστάσεων 300px x 66px

Βήμα 2

Χρησιμοποιοώντας το Rounded Rectangle Tool και βάζοντας 5px radius καλύπτουμε το μισό της εικόνας μας με ένα παραλληλόγραμμο με τον εξής τρόπο

Βήμα 3

Ανοίγουμε τα Blending Options και βάζουμε τις παρακάτω επιλογές

Βήμα 4

Κάνουμε Duplicate το επιλεγμένο Layer (δεξί κλικ στο layer και Duplicate Layer) και ανοίγουμε τα Blending Options του νέου layer. Στις παραπάνω επιλογές απλά επιλέγουμε το κουτάκι Reverse και στο Gradient Overlay και στο Stroke. Αμέσως μετά, φέρνουμε το νέο Layer μας ακριβώς από κάτω από το πρώτο, και έτσι γεμίζουμε την εικόνα μας με 2 αντίθετες κατά τον άξονα Χ εικόνες. Τέλος αποθηκεύουμε την εικόνα μας με το όνομα bg_button_span.gif

Βήμα 5

Δημιουργούμε μια νέα εικόνα μεγέθους 18px x 66px και επαναλαμβάνουμε τα παραπάνω βήματα μέχρι να φτάσουμε στο εξής αποτέλεσμα

Αποθηκεύουμε την εικόνα αυτή με το όνομα bg_button_a.gif

Βήμα 6

Τώρα ας ξεκινήσουμε να γράφουμε τον κώδικα μας. Ξεκινάμε δημιουργώντας 2 νέα αρχεία, με τα ονόματα index.html και style.css. Ανοίγουμε το index.html με τον αγαπημένο μας text editor και γράφουμε:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"  media="screen" />
<title>Buttons Test</title>
</head>
<body>
</body>
</html>

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

Βήμα 7

Τώρα ανοίγουμε το style.css και γράφουμε

body    {width:960px;margin:0 auto;}
.clear {
overflow: hidden;
width: 100%;
}

Με τον παραπάνω κώδικα δημιουργήσαμε τα βασικά styles που χρειζόμαστε.

Βήμα 8

Τώρα ήρθε η ώρα να δημιουργήσουμε το κουμπί μας. Μέσα στο <body> του αρχείου index.html θα προσθέσουμε τον εξής κώδικα

<a href="#"><span>Blue Button</span></a>

Με τον παραπάνω κώδικα δημιουργούμε ένα νέο σύνδεσμο (Anchor) και μέσα προσθέτουμε ένα <span>

Βήμα 9

Ας δώσουμε τώρα style στο στοιχείο που δημιουργήσαμε. Στο αρχείο style.css γράφουμε

a {
background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 33px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
outline:0;
}
a span {
background:url("images/bg_button_span.gif") no-repeat scroll 0 0 transparent;
display:block;
line-height:24px;
padding:4px 0 5px 18px;
}
a:hover {
background-position: bottom right;
color: #fff;
outline: none;
}
a:hover span {
background-position: bottom left;
padding: 5px 0 4px 18px;
}

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

Αποτέλεσμα

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

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Τι ειναι ασφάλεια λοιπον;

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

Χρησιμοποιώντας ασφάλεια στο κώδικα μας ερχομαστε πιο κοντα στην ιδέα του “αμυντικου προγραμματισμου” δηλαδη την προσπάθεια του προγραμματιστη να ελενξει για λάθη των χρηστών τα οποία θα γινουν απο αμέλεια η επιτιδευμένα ας δουμε λοιπον ενα μικρό παράδειγμα:

Έστω οτι έχουμε μια φόρμα  οπου ζητάμε απο  τον χρήστη να εισάγει τον αριθμό του κινητού του :

Ο PhP κώδικας μας συνήθως θα είναι καπως ετσι:

$arithmos=$_POST['onoma_pediou'];
echo $arithmos;

Εστω οτι στο πεδίο της mySql εχουμε δηλωσει  να ειναι INT δηλαδή τα δεδομένα που θα εισαχθουν απο τον χρήστη στην βαση δεδομενων θα ειναι αριθμοι .Εμεις  μπορουμε να υποθέσουμε οτι ο χρήστης παντα θα εισάγει αριθμους .

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

Ας δουμε πως θα ειναι ο κώδικας που θα πρεπε να γραψουμε για να αποφύγουμε το λάθος αυτο.

function check($dedomeno)
{
$dedomeno = trim($dedomeno);
$dedomeno = stripslashes($dedomeno);
$dedomeno = htmlspecialchars($dedomeno);
return $dedomeno;
}
if($_SERVER['REQUEST_METHOD']=='POST'){
if(isset($_POST['submit'])){
if(empty($_POST['number']))
{
echo "Δεν εχετε συμπληρώσει το πεδιο τηλέφωνο";
}
elseif(!ctype_digit(check(($_POST['number']))))
{
echo "Παρακαλω συμπληρώστε μονο αριθμους";
}
else
{
//εισαγωγή στοιχείων στην βάση δεδομένων
}
}
}
?>

Μεγάλο ε ?

Μην αναχώνεστε ας το εξηγήσουμε σιγά σιγά :

Δημιουργούμε μια συνάρτηση με όνομα check και δέχεται ένα όρισμα το $dedomeno τα δεδομένα που θέλουμε να επαληθεύσουμε .

Έπειτα η trim αφαιρεί τα κενά και άλλους χαρακτήρες από την αρχή του δεδομένου και από το τέλος.

Στην συνέχει το stripslashes αφαιρεί τα εισαγωγικά από τα δεδομένα μας

Τέλος το htmlspecialchars μετατρέπει τους ειδικούς χαρακτήρες σε HTML οντότητες για αποτροπή των χρηστών να εισάγουν δεδομένα του τύπου <a href=1>1</a>

function check($dedomeno)
{
$dedomeno = trim($dedomeno);
$dedomeno = stripslashes($dedomeno);
$dedomeno = htmlspecialchars($dedomeno);
return $dedomeno;
}

Ελέγχουμε τον τρόπο που ζητήθηκε η αίτηση

if($_SERVER['REQUEST_METHOD']=='POST')

Ελέγχουμε εάν έχει γίνει submit

if(isset($_POST['submit']))

Ελέγχουμε εάν είναι κενό το πεδίο

if(empty($_POST['number']))

Τέλος ελέγχουμε εάν το πεδίο είναι αριθμός με την συνάρτηση ctype_digit η οποία ελέγχει όλη την μεταβλητή που έχουμε δώσει ως όρισμα για να “δει” εάν είναι η δεν είναι αριθμός.

elseif(!ctype_digit(check(($_POST['number']))))

Αφού πήραμε μια γεύση μπορούμε πλέον να παραμετροποιήσουμε το προηγούμενο αρθρο μου

Πάμε σιγά σιγά να το κάνουμε μαζί.

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

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

db_con();
function check($dedomeno)  
{  
$dedomeno = <a onclick="javascript:pageTracker._trackPageview('/outgoing/php.net/manual/en/function.trim.php');" href="http://php.net/manual/en/function.trim.php">trim</a>($dedomeno);  
$dedomeno = <a onclick="javascript:pageTracker._trackPageview('/outgoing/gr.php.net/manual/en/function.stripslashes.php');" href="http://gr.php.net/manual/en/function.stripslashes.php">stripslashes</a>($dedomeno);  
$dedomeno = <a onclick="javascript:pageTracker._trackPageview('/outgoing/php.net/manual/en/function.htmlspecialchars.php');" href="http://php.net/manual/en/function.htmlspecialchars.php">htmlspecialchars</a>($dedomeno);  
return $dedomeno;  
}

Παρατηρήστε ότι είναι ίδια με την προηγούμενη με την διαφορά ότι έχει συν μια συνάρτηση την mysql_real_escape_string τι κάνει η συνάρτηση αυτή ;Βγάζει τους ειδικούς χαρακτήρες από ένα string το οποίο θα δώσουμε στην περίπτωσή μας τα στοιχεία που θα εισάγει ο χρήστης.

Έπειτα

$name =check($_POST['name']);
$pass = check($_POST['password']);
$email = check($_POST['email']);

με την συνάρτηση μας τσεκάρουμε όλα τα δεδομένα που αποστέλνονται από την φόρμα εισαγωγής.

if($_SERVER['REQUEST_METHOD']=='POST'){
if(isset($_POST['submit'])){
unset($_SESSION['errors']);
unset($_SESSION['error2']);
unset($_SESSION['success']);

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

$_SESSION['errors']
$_SESSION['error2']
$_SESSION['success']

για να αποφύγουμε τυχόν λάθη !

Ο έλεγχος για να δούμε εάν τα πεδία είναι άδεια η έχουν σταλεί λάθος δεδομένα.!

if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί "."<br> ";
}
if(empty($pass)){
$_SESSION['errors'].=" Το πεδίο κωδικός θα πρέπει να συμπληρωθεί"." <br> ";
}
if(empty($email) ){
$_SESSION['errors'].=" Το πεδίο email θα πρέπει να συμπληρωθεί "."<br> ";
}
else{
if(!isEmail($email)){
$_SESSION['errors'].="Το πεδίο email θα πρέπει να είναι της μορφής xxx@xxx.xx ";
}
}

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

Παρατηρήστε ότι κάνουμε redirect  στην φόρμα για να βγάλουμε κάποια μηνύματα στον χρήστη.

if(!isset($_SESSION['errors'])){
$query=mysql_query("SELECT Name FROM register where Name='$name' ") or die("Κάτι πήγε στραβά");
$check=mysql_num_rows($query);
if($check > 0){
$_SESSION['error2']="Το όνομα χρήστη $name υπάρχει ήδη στην βάση ";
header( "Location: forma.php" );
}
else {
$query=("INSERT INTO register (Name, Password,Email) VALUES ('$name', '$pass', '$email')");
$insert=mysql_query($query);
$_SESSION['sucess']="Ευχαριστούμε για την εγγραφή";
header( "Location: forma.php" );
}
}
else {
header( "Location: forma.php" );
}
}
?>

Προσοχή

Το db_con(); να γίνεται πριν το  mysql_real_escape_string διότι θα μας προκαλέσει μήνυμα  λάθους.

Όπως είδαμε η ασφάλεια είναι ένα σημαντικό κομμάτι του προγραμματισμού και μπορεί να διασφαλίσει την ομαλή ροή των δεδομένων και της λειτουργίας των script μας η ολόκληρης της ιστοσελίδας μας !

Βέβαια υπάρχουν πολλά ακόμη μέτρα ασφαλείας εμείς είδαμε τα βασικά.

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

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

forma.php
<?php
session_start();
?>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Φόρμα Εισαγωγής στοιχείων</title>
</head>
<body>
<pre>
<form action="register.php" method="get" >
Όνομα : <input name="name" style="background:#3281C0" /><br />
Κωδικός:<input name="name" style="background:#3281C0"  /><br />
Email : <input name="email"  style="background:#3281C0"  />
<br />
<input value="Καταχωρηση" />
<?php
if (isset($_SESSION['errors'])){
echo $_SESSION['errors'];
}
else
echo $_SESSION['error2']; ?>
</pre>
</form>
</body>
</html>

Η Βάση Δεδομένων

Έπειτα θα χρειαστούμε μια βάση δεδομένων στην οποία θα καταχωρήσουμε τα στοιχειά που θα εισάγουν οι χρήστες

Ας δούμε λοιπόν πως θα δημιουργήσουμε αυτή την βάση :

Δημιουργία βάσης :

CREATE DATABASE `Greektuts` ;

έπειτα αφού επιλέξουμε την βάση δημιουργούμε έναν πίνακα:

Δημιουργία πίνακα:

CREATE TABLE `Greektuts`.`Register` (
`Name` VARCHAR( 40 ) NOT NULL ,
`Password` VARCHAR( 40 ) NOT NULL ,
`Email` VARCHAR( 60 ) NOT NULL ,
PRIMARY KEY ( `Name` )
) ENGINE = MYISAM ;

Έτσι έχουμε δημιουργήσει την βάση μας και τον πίνακα μας .

Διαχείρηση Δεδομένων

Τώρα το κομμάτι του κώδικα που θα διαχειριστεί τα δεδομένα:

Δημιουργούμε ένα αρχείο php με όνομα register.php

Για αρχή θα δημιουργήσουμε μια function για να διαχειριζόμαστε την σύνδεση μας με την βάση

<?php
function db_con(){
$connection=mysql_connect("$localhost","$db_username","db_password") or die("Δεν επιτεύχθηκε η σύνδεση");
$db_selct=mysql_select_db($db_name,$connection) or die("Δεν επιτεύχθηκε η σύνδεση με τον πίνακα ");
}
?>

Λοιπόν δημιουργήσαμε μια μέθοδο για να μπορούμε να την καλούμε όποτε εμείς θέλουμε

Ας δούμε αναλυτικά τι κάναμε μέχρι στιγμής

Είναι ο κώδικας σύνδεσης στην βάση

$connection=mysql_connect("$localhost","$db_username","db_password") or die("Δεν επιτεύχθηκε η σύνδεση");

Σημαντικό*

Αντικαταστήστε το $localhost,$db_username,$db_password και παρακάτω το $db_name

με τα δικά σας στοιχειά ένα παράδειγμα :

$connection=mysql_connect("localhost","root","") or die("Δεν επιτεύχθηκε η σύνδεση");

Η σύνδεση αυτή καθορίζει το όνομα της βάσης την οποία θέλουμε να επιλέξουμε

$db_selct=mysql_select_db($db_name,$connection) or die("Δεν επιτεύχθηκε η σύνδεση με τον πίνακα ");

Έπειτα προχωράμε παρακάτω :

<?php
session_start();
$name = $_POST['name'];
$pass = $_POST['password'];
$email = $_POST['email'];
if(isset($_POST['submit'])){
unset($_SESSION['errors']);
if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί ";
}
if(empty($pass)){
$_SESSION['errors'].=" Το πεδιο κωδικός θα πρέπει να συμπληρωθεί ";
}
if(empty($email)){
$_SESSION['errors'].=" Το πεδιο email θα πρεπει να συμπληρωθει ";
}

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

Ας το πάρουμε κομμάτι κομμάτι

session_start();

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

Ο παρακάτω κώδικας ελέγχει αν έχει “πατηθεί “ το κουμπί Καταχώρησε αν όντως έχει “πατηθεί”

τότε βγάζει όλα τα δεδομένα από το $_SESSION['errors'] ώστε να μην έχουμε κολλήματα αργότερα

if(isset($_POST['submit'])){
unset($_SESSION['errors']);

Εδώ κάνουμε έναν έλεγχο από τους πιο απλούς που θα μπορούσατε να κάνετε

ελέγχουμε αν το πεδίο όνομα είναι άδειο αν ναι τότε εκχωρούμε μέσα στο $_SESSION  το ακόλουθο μήνυμα. Το ίδιο γίνετε για όλα τα πεδία τα οποία θέλουμε να ελέγξουμε.

if(empty($name)){
$_SESSION['errors']=" Το πεδίο όνομα θα πρέπει να συμπληρωθεί ";
}

Παρατήρηση στο δεύτερο έλεγχο και ούτω κάθε ξης βάζουμε μια . πριν το =

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

if(!isset($_SESSION['errors'])){
db_con();
$query=mysql_query("SELECT * FROM register where Name='$name' ") or die("Κάτι πήγε στραβά");
$check=mysql_num_rows($query);
if($check >0){
$_SESSION['error2']="Το όνομα χρήστη $name υπάρχει ήδη στην βάση ";
header( "Location: forma.php" );
}
else {
$query=("INSERT INTO register (Name, Password,Email) VALUES ('$name', '$pass', '$email')");
$insert=mysql_query($query);
}
}
else {
header( "Location: forma.php" );
}
}

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

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ



Η HTML5 είναι η νέα έκδοση της γνωστής γλώσσας προγραμματισμού HTLM. Η προηγούμενη έκδοση, η οποία χρησιμοποιούμε ακόμα σήμερα, βγήκε το 1999. Από τότε όμως έχουν αλλάξει πολλά στον παγκόσμιο ιστό, και έτσι η ανάγκη για standards και πλήρη συμβατότητα οδήγησε το World Wide Web Consortium (W3C) και το Web Hypertext Application Technology Working Group (WHATWG) να συνεργαστούν και να δημιουργήσουν την νέα αυτή γλώσσα. Η HTML5 είναι ακόμα υπό ανάπτυξη, αλλά μερικοί browsers υποστηρίζουν από τώρα κάποια χαρακτηριστικά της και κάποιες λειτουργίες της.

Κάποιοι βασικοί κανόνες που έχουν οριστεί για την HTML5 είναι:

• Βάση για τα νέα χαρακτηριστικά να είναι οι HTML, CSS, DOM, και η JavaScript
• Ελαχιστοποίηση των plugins (όπως το Flash)
• Καλύτερη λειτουργία εντοπισμού λαθών
• Περισσότερο markup για να αντικατασταθεί το scripting
• Πλήρη συμβατότητα ανεξαρτήτως συσκευής

Νέα Χαρακτηριστικά

Κάποια από τα νέα χαρακτηριστικά της HTML5 είναι:

• Το στοιχείο canvas για το drawing
• Τα στοιχεία video και audio για αναπαραγωγή πολυμέσων
• Νέα στοιχεία περιεχομένου όπως τα footer, header, nav και section
• Νέα στοιχεία δημιουργίας φόρμας όπως τα calendar, date, time, email, url και search

Video στην HTML5

Μέχρι σήμερα, για να παίξουμε ένα video σε έναν browser χρειαζόμαστε κάποιο plugin (πρόσθετο) όπως το Flash ή το QuickTime.

H HTML5 μας καθορίζει έναν νέο τρόπο, και αυτός είναι με την χρήση του στοιχείου video. Ας δούμε πως χρησιμοποιείται

Το μόνο που χρειάζεται να γράψουμε για να εμφανίσουμε το video μας είναι:

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

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να δούνε το video μας από κάποιον browser που δεν υποστηρίζει το στοιχείο video της HTML5 γράφουμε

<video src="movie.ogg" width="320" height="240"  controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο video της HTML5.
</video>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου video είναι η εξής:

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

Υποστηριζόμενα Video Files/Browsers

Ιδιότητες

• autoplay: To video θα ξεκινήσει αυτόματα μόλις φορτώσει
• controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play
• height:  To ύψος σε pixels
• loop: Αν θα επαναλαμβάνεται το video μετά το τέλος του
• preload: Το video θα φορτώνεται μαζί με την σελίδα
• src: Το URL του video
• width: To πλάτος σε pixels

Audio στην HTML5

Ότι ισχύει σε σχέση με τα videos και τα plugins, ισχύει και για τα audio clips. Έτσι η HTML5 μας ορίζει το στοιχείο audio για την αναπαραγωγή ήχων.

Το μόνο που χρειάζεται να γράψουμε για να αναπαράγουμε τον ήχο μας είναι:

<audio src="song.ogg" controls="controls">
</audio>

Για να εμφανίσουμε ένα μήνημα σε όλους όσους πάνε να ακούσουν τον ήχο μας από κάποιον browser που δεν υποστηρίζει το στοιχείο audio της HTML5 γράφουμε

<audio src="song.ogg" controls="controls">
Ο φυλλομετρητής σας δεν υποστηρίζει το στοιχείο audio της HTML5.
</audio>

Τέλος μια πιο εξειδικευμένη χρήση του στοιχείου audio είναι η εξής:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Υποστηριζόμενα Audio Files/Browsers

Ιδιότητες

autoplay: ο ήχος θα ξεκινήσει αυτόματα μόλις φορτώσει

controls: Θα εμφανίζονται ή όχι τα κουμπιά όπως το play

loop: Αν θα επαναλαμβάνεται ο ήχος μετά το τέλος του

preload: Ο ήχος θα φορτώνει μαζί με την σελίδα

src: To URL του ηχητικού κομματιού μας

Ευχαριστούμε πολύ τα W3Schools για αυτό το βοήθημα

Στο  δεύτερο μέρος της εισαγωγής στην HTML5 θα δούμε το στοιχείο Canvas και τα tags της HTML5

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.

Βήμα 2

Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.

Βήμα 3

Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε

<div class="column">
<div class="widget">
<h3>Τελευταία Άρθρα</h3>
<p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p>
<p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p>
<p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p>
</div>
<div class="widget">
<h3>Γράψτε για το GreekTuts</h3>
<p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p>
</div>
<div>
<h3>Συνεντεύξεις</h3>
<p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p>
</div>
</div>
<div id="featured">
<h2>Δωρεάν Μαθήματα ECDL</h2>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p>
</div>
<div class="column">
<div class="widget">
<h3>Γίνε Συνδορμητής Στο GreekTuts</h3>
<p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p>
</div>
<div class="widget">
<h3>RSS Feed</h3>
<strong>Μαθήματα ECDL</strong>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p>
</div>
<div class="widget">
<h3>Επικοινωνία...</h3>
<p>Επικοινωνήστε μαζί μας</p>
<input type="text" value="Όνομα..." />
<input type="text" value="Email..." />
<textarea rows="4" cols="20" value="Μήνυμα..."></textarea>
</div>
</div>
<div class="column">
<div class="widget">
<h3>Οι Φίλοι μας στο Twitter</h3>
<center><img src="styles/twitt.png"></img></center>
</div>
</div>

Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.

Βήμα 4

Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας

#featured {
width:                    592px;
padding:                6px;
margin:                    6px;
margin-left:            18px;
margin-top:                16px;
float:                    left;
height:                    200px;
background:                #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
}
#featured h2 {
margin-left:            340px;
color:                    #ffffff;
font-size:                20px;
font-weight:            bold;
}
#featured p {
margin-left:            342px;
color:                    #ffffff;
}
.column {
width:                    290px;
padding:                6px;
margin:                    0;
margin-left:            12px;
float:                    left;
min-height:                300px;
height:                    100%;
}
.widget {
position:                relative;
padding:                6px;
margin:                    0;
margin-top:                10px;
background:                #f3f3f3 url(grad1.png) no-repeat top right;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
min-height:                30px;
overflow:                hidden;
border:                    1px solid #C9C9C9;
}
.widget h3 {
margin-top:                -6px;
color:                    #0f57bb;
font-size:                1.6em;
line-height:            2em;
font-weight:            normal;
border-bottom:            1px solid #999999;
background:                transparent url(movable.png) no-repeat center left;
text-indent:            12px;
cursor:                    hand;
text-shadow:            0 1px 0 #FFFFFF;
}

Βήμα 5

Θα χρησιμοποιήσουμε τις εξής εικόνες

accent.jpg

grad1.png

movable.png

twitt.png

Βήμα 6

Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα

<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});
});
</script>

Βήμα 7

Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται

.widget .close {
width:                    25px;
height:                    25px;
position:                absolute;
top:                    0;
right:                    0;
cursor:                    pointer;
}
.ui-sortable-helper {
border:                    3px solid #0f57bb;
cursor:                    move;
}

Βήμα 8

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

Δείτε παρακάτω το τελικό αποτέλεσμα

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ