CSS σημαίνει Cascading Style Sheets. Και τι σημαίνει αυτό; Ας το πάρουμε από την αρχή.

Η γνωστή σε όλους μας γλώσσα προγραμματισμού ιστοσελίδων και εφαρμογών, η HTML, χρησιμοποιείται για την δημιουργία και την περιγραφή στοιχείων σε μια ιστοσελίδα. Όταν λοιπόν εμείς διαβάζουμε ένα κείμενο, όπως αυτό που διαβάζεται αυτήν την στιγμή, o browser μας, δεν το “διαβάζει” όπως και εμείς. Συνήθως τα κείμενα που βρίσκονται σε μια ιστοσελίδα, είναι περιτρυγυρισμέμα σε paragraph tags. Τα Tags είναι ο τρόπος που χρησιμοποιείται για να περιγράψουμε αντικείμενα. Έτσι, ότι βρίσκεται ανάμεσα σε tags, παίρνει και τις αντίστοιχες ιδιότητες.

Αν λοιπόν το κείμενο “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” το γράψουμε <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, αυτό θα πάρει τις ιδιότητες της παραγράφου, ενώ αν το γράψουμε <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> θα γίνει bold.

Ωραία ως εδώ. Τι γίνεται όμως όταν θέλουμε αυτό το κείμενο να έχει μεγαλύτερο μέγεθος από κάποιο άλλο στοιχείο paragraph στην ιστοσελίδα μας; H ακόμα χειρότερα άμα θέλουμε να έχουμε 8 διαφορετικά είδη παραγράφων και τίτλων; Εδώ έρχονται και συμπληρώνουν τα CSS. Μέσα από τους selectors (επιλογέας) μπορούμε να “στοχεύσουμε ” στοιχεία στην HTML σελίδα, και να τους δώσουμε στυλ.

Σύνταξη – Δομή

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

Το παραπάνω παράδειγμα, “στοχεύει” όλα τα στοιχεία H1 στην ιστοσελίδα μας. H1 είναι ο μεγαλύτερος σε μέγεθος τίτλος σε ένα κείμενο. Αρχίζοντας λοιπόν, σαν selector, χρησιμοποιούμε το όνομα του tag που θέλουμε να αλλάξουμε. Αφήνουμε ένα κενό, και  ανοίγουμε αγκύλες. Ότι περιέχεται μέσα στις αγκύλες είναι η δήλωση μας . Χρησιμοποιόντας την ιδιότητα (property) color στοχεύουμε το χρώμα του κειμένου. Αμέσως μετά την ιδιότητα βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή μας. Για να κλείσουμε την πρώτη δήλωση, χρησιμοποιούμε το ελληνικό ερωτηματικό (semicolon). Στην δεύτερη δήλωση, χρησιμοποιούμε την ιδιότητα font-size, η οποία αλλάζει το μέγεθος του κειμένου. Βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή που θέλουμε να έχει σε pixels. Κλείνουμε με ελληνικό ερωτηματικό, και με την ανάποδη αγκύλη.

Χρησιμοποιόντας λοιπόν τα CSS μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας, και να τους δώσουμε ζωή. Δείτε τον κώδικα ζωντανά μέσω του w3scholls.com χρησιμοποιόντας τον σύνδεσμο που ακολουθεί

Id και Class

Επειδή τα tags της HTML είναι περιορισμένα, τα CSS μας δίνουν την δυνατότητα να δηλώσουμε τα δικά μας μοναδικά ή μη στοιχεία, και να τους δώσουμε στύλ. Αυτό το κάνουμε χρησιμοποιόντας μέσα στα division tags της HTML (τα γνωστά divs) , ID και CLASS. Πως το κάνουμε αυτό; Ας δούμε ένα γράφιμα.

Στα παραπάνω παραδείγματα, βλέπουμε πως μπορούμε να “τυλίξουμε” την παράγραφο μας μέσα σε divs, και να επιλέξουμε ακριβώς αυτό που θέλουμε για να του δώσουμε στύλ. Στην πρώτη περίπτωση μπορεί να θέλουμε να βάλουμε το κείμενο στο κέντρο αλλά να μην θέλουμε το ίδιο για όλα τα <p> tags της σελίδας μας. Έτσι γράφουμε

.test { color: black; text-align:center;}

Αυτό θα επιλέξει όλο το div και θα μετακινίσει το κείμενο του στο κέντρο, χωρίς να επιρεάσει άλλα paragraphs στην σελίδα.

Αν θέλουμε να επιλέξουμε την παράγραφο που υπάρχει μέσα στο div, γράφουμε

.test p { color: black; text-align:left;}

Γενικότερα, όταν θέλουμε να επιλέξουμε στοιχεία μέσα σε divs, γράφουμε αναλυτικά όλο το “μονοπάτι” μέχρι να φτάσουμε σε αυτά. Ας δούμε για παράδειγμα το 3 κώδικα στο γράφιμα παραπάνω. Έχουμε ένα paragraph μέσα σε ένα div μέσα σε ένα id. Για να επιλέξουμε και να δώσουμε στυλ μόνο στην παράγραφο, γράφουμε

#test .test p { color:white; }

Παρατηρήστε ότι έχουμε το ίδιο όνομα στο class και στο id μας. Αυτό δεν πειράζει καθόλου. Τα ID και τα Classes είναι διαφορετικά στοιχεία και έτσι επιτρέπεται να έχουν το ίδιο όνομα.

ΠΡΟΣΟΧΗ: Το σωστό είναι όταν χρησιμοποιούμε ID να μην εμφανίζουμε το ίδιο στοιχείο πάνω από μια φορά στην σελίδα μας. Τα ID δηλώνουν μοναδικά στοιχεία. Το αντίθετο συμβαίνει με τα Classes. Μπουρούμε να έχουμε απεριόριστα αντίγραφα του class μέσα στην σελίδα μας.

Cascading

Και τι πάει να πεί Cascading; Είναι αναφορά στο φαινόμενο του καταράχτη, και ουσιαστικά δείχνει την κληρονομικότητα που έχουν τα στοιχεία των CSS. Και πως εφαρμόζεται αυτό;

Στο τρίτο παράδειγμα που γράψαμε παραπάνω, αν γράψουμε

#test .test p { color:white; }

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

#test { color:white; }

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

Στο επόμενο μέρος…

Αφού κάναμε μια εισαγωγή στα CSS, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τις επιλογές, τα Ids και τα Classes, και θα ξεκινήσουμε να δίνουμε στύλ σε στοιχεία. Μέχρι τότε, περιμένουμε να ακούσουμε τις απόψεις σας και τις πρακτικές σας πάνω σε θέματα χρήσης των CSS.

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

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

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



Actions και Filters. Πως αρχικοποιώ;

if(isset($myPlugin))  {

//Actions

//Filters

}

Απλό έτσι; Το μόνο που χρειάζεται κάνετε είναι να ελέγξετε ότι ένα αντικείμενο τύπου myTestPlugin έχει δημιουργηθεί (κατ’ επέκταση φυσικά ελέγχετε και ότι το plug-in έχει εγκατασταθεί και αρχικοποιηθεί σωστά).

WordPress Actions

Ας προσπαθήσουμε να γεμίσουμε τα κενά κάτω από τα σχόλια. Ξεκινούμε με τις Actions (//Actions).

Για να δημιουργήσουμε μία action θα πρέπει σε πρώτη φάση να κατασκευάσουμε μία συνάρτηση (function) για το plug-in μας.

function testFunction() {

?>

<!-- just a comment -->

<?php

}

Όπως μπορείτε να καταλάβετε η παραπάνω συνάρτηση απλά προσθέτει ένα comment… και τίποτε άλλο. Ας δούμε πως την καλούμε.

Χρειαζόμαστε μία action. Επομένως…

if(isset($myPlugin)) {

//Actions

add_action('wp_head', array(&$myPlugin, 'testFunction'), 1);

//Filters

}

δηλαδή…

η πλήρης σύνταξη της add_action() σύμφωνα με το WordPress Plugin API είναι add_action(‘hook_name’, array(&$myPlugin,’myFunction’), PRIORITY);

• hook_name: το όνομα με το οποίο θέλουμε να καλούμε την action (σε κάποιο σημείο της wordpress εγκατάστασής μας).
• array(…): πίνακας με την ταυτότητα του action
• &$myPlugin: αναφορά στην μεταβλητή / αντικείμενο της κλάσης που αντιπροσωπεύει το plug-in μας
• MyFunction: η συνάρτηση που επιθυμούμε να καλέσουμε
• PRIORITY: προτεραιότητα εκτέλεσης. Τα μικρά νούμερα εκτελούνται γρηγορότερα

Πως το τρέχω;

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

Αφαίρεση των actions

Οι actions μπορούν να αφαιρούνται δυναμικά, ακριβώς όπως δημιουργούνται κάνοντας χρήση της ακόλουθης σύνταξης:

remove_action('action_hook','action_function')

• hook_name: το όνομα με το οποίο θέλουμε να καλούμε την action (σε κάποιο σημείο της wordpress εγκατάστασής μας).
• MyFunction: η συνάρτηση που επιθυμούμε να καλέσουμε

WordPress Filters

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

Τι μπορώ να αλλάξω χρησιμοποιώντας filters;

• Άρθρα
• Σχόλια
• Feeds, κ.α.

Filter περιεχομένου

Είπαμε ότι τα filters αποτελούν ουσιαστικά συναρτήσεις. Ένα πολυ ενδιαφέρον filter είναι το ‘the_content’. Αυτό που ουσιαστικά κάνει είναι να επεμβαίνει στο κείμενο ενός άρθρου. Στο παράδειγμα που ακολουθεί θα χρησιμοποιήσουμε το filter περιεχομένου για να προσθέτουμε μία γραμμή στο τέλος κάθε άρθρου.

Σύμφωνα με το WordPress Plugin API η σύνταξη της add_filter είναι η ακόλουθη:

add_filter('hook_name','my_filter',[priority],[accepted_args]);

Ας φτιάξουμε για αρχή την συνάρτηση που θα προσθέτει την έξτρα γραμμή:

function addLine($content=”) {

$content .= “<p>My text goes here</p>”;

return $content;

}

• Αρχικά δηλώνεται η συνάρτηση η οποία παίρνει σαν όρισμα μία μεταβλητή
• Αν δεν δοθεί κείμενο κατά την κλήση της, δίδεται μία default τιμή
• Στο κείμενο που δόθηκε (ή η default τιμή αν δε δόθηκε τίποτε) προστίθεται η γραμμή που θέλουμε να τελειώνει το post (στην περίπτωσή μας  “My text goes here”)
• Τέλος, επιστρέφεται το αλφαριθμητικό στην τελική του μορφή.

Στην συνέχεια θα πρέπει να εκτελέσουμε την συνάρτηση μας αυτή κάνοντας χρήση του filter ‘the_content’. Κάνοντας χρήση του κώδικα που έχουμε ως τώρα, μετά την προσθήκη του filter θα μοιάζει κάπως έτσι:

if(isset($myPlugin)) {

//Actions

add_action('wp_head', array(&$myPlugin, 'testFunction'), 1);

//Filters

add_filter('the_content', array(&$myPlugin,'addLine'));

}

Εφόσον το plugin εγκατασταθεί και ενεργοποιηθεί, στο τέλος κάθε άρθρου θα πρέπει να βλέπετε τουλάχιστον ( ) την έξτρα γραμμή.

Filter συγγραφεά

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

Όπως και πριν, χρειαζόμαστε μία συνάρτηση:

function authorFunction($author=”) {

return strtoupper($author);

}

• Αρχικά δηλώνεται η συνάρτηση η οποία παίρνει σαν όρισμα μία μεταβλητή  (στην συγκεκριμένη περίπτωση το όνομα το συγγραφέα)
• Αν δεν δοθεί κείμενο κατά την κλήση της, δίδεται μία default τιμή
• Το περιεχόμενο της μεταβλητής (στην συγκεκριμένη περίπτωση ο συγγραφέας του σχολίου, επιστρέφεται με κεφαλαία γράμματα

Αυτό που πρέπει να κάνουμε τώρα είναι να επιβάλουμε στην παραπάνω συνάρτηση να τρέξει κατά την συγγραφή ενός σχολίου από κάποιον συγγραφέα. Για τον λόγο αυτό θα χρησιμοποιήσουμε το get_comment_author filter.

if(isset($myPlugin)) {

//Actions

add_action('wp_head', array(&$myPlugin, 'testFunction'), 1);

//Filters

add_filter('the_content', array(&$myPlugin,'addLine'));

add_filter('get_comment_author',array(&$myPlugin, authorFunction));

}

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

Στο σημερινό μας άρθρο, πήραμε μια γεύση από την πραγματική δύναμη των WordPress plugins ελέγχοντας το περιεχόμενο της WordPress εγκατάστασής μας. Ωστόσο, βρισκόμαστε ακόμη στην αρχή. Μείνετε συντονισμένοι για το επόμενο άρθρο της σειράς. Μέχρι τότε…

να είστε καλά και να προσέχετε τον εαυτό σας!

[Πηγή:Devlounge]

Πως λειτουργεί;

Ας ξεκινήσουμε με μια μίνι αναφορά στο πως εγκαθιστούμε ένα WordPress plug-in το οποίο έχουμε κατασκευάσει (μπορεί να σας φαίνεται ότι προτρέχω, αλλά πιστέψτε με είναι πολύ σημαντικό να γνωρίζεται πως λειτουργεί πραγματικά αυτή η διαδικασία πριν ξεκινήσετε να κατασκευάζετε το πρώτο σας plug-in).

1. Τοποθετούμε το plug-in στον φάκελο “wp-content/plugins/” (μετά από αυτό το βήμα το plug-in μας πρέπει να είναι έτοιμο για εγκατάσταση – να φαίνεται  δηλαδή στη λίστα με τα διαθέσιμα προς εγκατάσταση plug-ins – ).
2. Όταν το plug-in ενεργοποιείται πρακτικά ζητά από το WordPress να φορτώσει τον κώδικα σε κάθε μια από τις σελίδες (συμπεριλαμβανομένης και αυτής του διαχειριστή). ΠΡΟΣΟΧΗ: Όταν ενεργοποιείται πολλά plug-ins, η εγκατάσταση του WordPress σας ενδέχεται να λειτουργεί πολύ πιο αργά.

Αφότου εκτελεστούν τα δύο ανωτέρω βήματα θα πρέπει το plug-in σας να είναι εγκατεστημένο και σε λειτουργία.

Πριν προχωρήσουμε στα ζητήματα δομής και αρχιτεκτονικής ενός WordPress plug-in θεωρούμε δόκιμο να αναφέρουμε μερικές ακόμη ενδιαφέρουσες λειτουργίες που μπορούν να επιτευχθούν από ένα WordPress plug-in.

• Δεδομένου ότι το WordPress  plug-in φορτώνει τον κώδικά σας αυτόματα, σας επιτρέπει να επιτύχετε διάδραση τόσο με το WordPress plug-in API όσο και με τα tags των WordPress Templates (δυνατότητα χρήσης των υπαρχόντων ή / και δημιουργία νέων).
• Αν σκοπεύετε να εκτελέσετε αλλαγές στο περιεχόμενο των άρθρων ή στα σχόλια, θα πρέπει να μελετήσετε τα σχετικά με το WordPress Loop. Μπορείτε να ελέγξετε τη συμπεριφορά του κώδικα και που αυτός τρέχει κάθε φορά, χρησιμοποιώντας actions και filters (για τα οποία θα μιλήσουμε αναλυτικότερα σε επόμενο άρθρο).

Δομή του plug-in: Αρχείο ή φάκελος;

Η αλήθεια είναι ότι δεν υπάρχει σωστό και λάθος. Ένα WordPress plug-in μπορεί να αποτελείται απλά από ένα αρχείο php ή από μία πιο σύνθετη δομή, ένα κατάλογο αρχείων. Ας δούμε ένα παράδειγμα ενός τέτοιου καταλόγου:

• ΟΝΟΜΑ_ΚΑΤΑΛΟΓΟΥ (δηλαδή το όνομα του plug-in)
• ◦          ΟΝΟΜΑ_ΚΑΤΑΛΟΓΟΥ.php (υποχρεωτικά)
• ◦          ΦΑΚΕΛΟΣ js (φάκελος που θα περιέχει αρχεία javascript – προαιρετικά)
• ◦          ΦΑΚΕΛΟΣ css (φάκελος που θα περιέχει αρχεία css – προαιρετικά)
• ◦          ΦΑΚΕΛΟΣ php (φάκελος που θα περιέχει άλλα αρχεία php – προαιρετικά)
• ◦          ΦΑΚΕΛΟΣ images (φάκελος που θα περιέχει εικόνες – προαιρετικά)

ή

• myTestPlugin/
• ◦          myTestPlugin.php
• ◦          js/
• ◦          css/
• ◦          php/
• ◦          images/

Κυρίως αρχείο (δομή)

Όσοι έχετε μία κάποια οικειότητα με το WordPress θα έχετε προσέξει ότι στον τομέα των plug-ins (λίστα με τα διαθέσιμα plug-ins) παρέχονται διάφορες πληροφορίες για τα plug-ins αυτά (όνομα, έκδοση, περιγραφή, κατάσταση). Αν δεν ξέρετε ήδη πως παρέχονται αυτές οι πληροφορίες στη μηχανή του WordPress δεν θα το μαντέψετε ποτέ:

<?php
/*
Plugin Name: My Fiirst Plug-In
Plugin URI: http://www.mypersonalsite.gr
Version: v1.00
Author: <a href=”http://krap.gr/”>Apostolos Kritikos</a>
Description: This is my first plugin. Please don't be too hard on me if it crushes.

Ναι! Είναι σχόλια! Με τις παραπάνω 7 γραμμές οφείλει να αρχίζει κάθε WordPress Plug-in που σέβεται τον εαυτό του.

Σχόλια; ΟΚ… Και το plug-in πότε το κατασκευάζω;

Για την δημιουργία του λειτουργικού τμήματος του plug-in απαιτείται χρήση κλάσεων PHP. Αν και η πρότερη γνώση προγραμματισμού PHP κλάσεων θα βοηθούσε πολύ, δεν θεωρείται απαραίτητη γνώση για την παρακολούθηση του παρόντος άρθρου.

Για αρχή απαιτείται να εξασφαλίσουμε ότι δεν υπάρχει άλλο plug-in με το  ίδιο όνομα εγκατεστημένο στο WordPress σύστημά μας. Ο συγκεκριμένος έλεγχος επιτυγχάνεται με τον παρακάτω κώδικα:

if(!class_exists(“myTestPlugin”)) {

class myTestPlugin {

function myTestPlugin() { //κατασκευαστής

}

}

} //τέλος κλάσης

Εφόσον λοιπόν μια κλάση με όνομα ταυτόσημο με αυτό του δικού μας plug-in  δεν υπάρχει, δημιουργείται.

if(class_exists(“myTestPlugin”)) {

$myPlugin = new myTestPlugin();

}

Ο παραπάνω κώδικας  αναλαμβάνει να αρχικοποιήσει ένα στιγμιότυπο της κλάσης που δημιουργήσαμε νωρίτερα. Μετά την εκτέλεση του τμήματος αυτού η  μεταβλητή $myPlugin αποτελεί ένα αντικειμένο τύπου myTestPlugin δήλαδή της κλάσης που υλοποιεί την λειτουργικότητα του plugin μας.

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

Την επόμενη φορά (spoiler alert ) θα μιλήσουμε  για το πως υλοποιούμε actions και  filters για αυτό, μείνετε συντονισμένοι. Μέχρι τότε…

να είστε καλά και να προσέχετε τον εαυτό σας!

[Πηγή:Devlounge]

Βήμα 1

Ξεκινώντας, δημιουργούμε έναν νέο καμβά. (600×400 pixels)

Βήμα 2

Δημιουργούμε ένα νέο επίπεδο (layer), και με την βοήθεια του εργαλείου “ορθογωνικής επιλογής” σχηματίζουμε ένα ορθογώνιο (βασικό σχήμα της κάρτας μας) και έπειτα το γεμίζουμε με άσπρο χρώμα.

Βήμα 3

Κάνουμε διπλό click στο επίπεδο (layer) που δημιουργήσαμε, για να εμφανιστεί το μενού επιλογών “στυλ επιπέδου”. Προσθέστε το εφέ σκιάς και περιγράμματος σύμφωνα με τις παρακάτω εικόνες.

Βήμα 4

Δημιουργούμε ακόμα ένα νέο επίπεδο (layer), επιλέγουμε ένα χρώμα της αρεσκείας μας – όχι πολύ σκούρο (εγώ θα χρησιμοποιήσω μπλε, #003366) και το γεμίζουμε με χρώμα.

Βήμα 5

Εν συνεχεία θα “μικρύνουμε” ελάχιστα το επίπεδο που μόλις δημιουργήσαμε. Για να το πετύχουμε αυτό θα επιλέξουμε επεξεργασία/μετασχηματισμός/κλιμάκωση (edit/transform/scale) και κρατώντας πατημένο το κουμπί shift από το πληκτρολόγιό μας, μετακινούμε το επίπεδο προς τα μέσα πιάνοντας το από μια άκρη και τέλος το τοποθετούμε στο κέντρο του προηγούμενου επιπέδου.

Βήμα 6

Δημιουργούμε ακόμα ένα νέο επίπεδο (layer) και επιλέγουμε μια πιο σκουρόχρωμη απόχρωση από το χρώμα που επιλέξαμε προηγουμένως (στο βοήθημα χρησιμοποιώ το χρώμα #071f38). Έπειτα με το εργαλείο “ντεγκραντέ” σύρουμε από κάτω προς τα πάνω, όπως φαίνεται στην εικόνα. Σημείωση: Βεβαιωθείτε ότι έχετε επιλεγμένη την επιλογή “Προσκήνιο σε Διαφανές”. Για να κάνετε την γραμμή του ντεγκραντέ ίση, απλά έχετε πατημένο το shift και σύρετε προς τα πάνω.

Βήμα 7

Σε αυτό το σημείο θα κάνουμε ακριβώς τα αντίθετα που κάναμε στο βήμα 6. Συγκεκριμένα δημιουργούμε ένα νέο επίπεδο και επιλέγουμε μια πιο ανοιχτόχρωμη απόχρωση από το αρχικό χρώμα της κάρτας μας (στο βοήθημα χρησιμοποιώ το χρώμα #0054a8). Με το εργαλείο “ντεγκραντέ” και πάλι σύρουμε αυτή τη φορά από πάνω προς τα κάτω.

Βήμα 8

Αφού δημιουργήσουμε ένα επιπλέον layer, επιλέγουμε το “εργαλείο ελλειπτικής επιλογής” και κατασκευάζουμε έναν μακρόστενο κύκλο κατά μήκος της κάρτας. Επιλέγοντας ένα πολύ απαλό χρώμα (#b1d5f9), με την βοήθεια του εργαλείου ντεγκραντέ σύρουμε από πάνω προς τα κάνω, όπως φαίνεται και στην παρακάτω εικόνα και επιπλέον μετακινούμε την τιμή της διαφάνειας του επιπέδου γύρω στο 15%.

Βήμα 9

Τέλος με το εργαλείο ορθογωνίου κατασκευάζουμε ένα ορθογώνιο και το τοποθετούμε πάνω αριστερά. Έπειτα κάνουμε διπλό click πάνω στο ορθογώνιο για να εμφανιστεί το μενού επιλογών “στυλ επιπέδου”. Προσθέστε τα εφέ, σκιά και επικάλυψη ντεγκραντέ σύμφωνα με τις παρακάτω εικόνες.

Βήμα 10

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

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

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

• Redesign – Πλήρης επανασχεδιασμός του look και της δομής της ιστοσελίδας
• Επιστροφή του forum
• Επανασχεδιασμός σχολίων, για πιο εύκολη συζήτηση πάνω στα άρθρα
• Νέα περιοχή μελών, με άμεση πρόσβαση σε όλα τα αρχεία
• Επανασχεδιασμός προσωπικής σελίδας συντακτών
• Αλλά και πολλά άλλα…

Blast to the Past

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

Previews

Κατά την διάρκεια του Ιουλίου, και μέχρι το τέλος του, θα αποκαλύπτονται εβδομάδα με την εβδομάδα screenshots από την νέα έκδοση του GreekTuts…

Κεντρική Σελίδα

Άρθρο σε Πλήρη Ανάπτυξη

Στατική Σελίδα

Σελίδα Επικοινωνίας

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

Ο Chuck Norris και η Python

Ο Chuck Norris αποτελεί πλέον persona – φαινόμενο χάρη στο διαδικτυακό καλαμπούρι που ξεκίνησε στις τάξεις των geeks του διαδικτύου (http://www.chucknorrisfacts.com/). Αποτελεί δηλαδή ένα παράδειγμα χαρακτήρα που, ενώ η πρωταρχική του ιδιότητα θα μπορούσε να χαρακτηρισθεί αδιάφορη, η χρήση του σε ένα πετυχημένο (και παράλληλα έξυπνο) project, όχι μόνον τον έφερε και πάλι στο προσκήνιο, αλλά εκτίναξε και το «κασέ» του, στα ύψη.

Με παρόμοιο τρόπο η Python αντλεί μεγάλη δύναμη μέσα από τις εφαρμογές για την υλοποίηση των οποίων έχει χρησιμοποιηθεί. Προφανώς η Python, σαν γλώσσα προγραμματισμού, έχει κάποια δυνατά σημεία και κάποιες αδυναμίες. Και οι δύο αυτές κατηγορίες σημείων όμως, κατά την προσωπική μου άποψη, περιλαμβάνουν ζητήματα υποκειμενικά. Μία εφαρμογή αντίθετα, χαρακτηρίζεται από χαρακτηριστικά όπως λειτουργικότητα, ορθότητα (ύπαρξη κατά το δυνατό λιγότερων λαθών), φορητότητα (υποστήριξη διαφορετικών λειτουργικών συστημάτων, κλπ. Αυτά τα χαρακτηριστικά, όντας εύληπτα από τους περισσότερους χρήστες, έμπειρους και μη, διευκολύνουν την αξιολόγηση της ίδιας της γλώσσας προγραμματισμού (κρίση δια του αποτελέσματος) μέσα από μία, θεωρώ, αντικειμενικότερη ματιά.

Αν λοιπόν η επιτυχία του Chuck Norris εκτινάχθηκε στα ύψη από την δημοσιοποίηση ενός καλοστημένου project σκεφθείτε που πρέπει να κατατάξουμε την γλώσσα Python μετά την παρουσίαση όχι μιας, ούτε δύο αλλά 4 + 1 εκπληκτικών εφαρμογών.

Έχετε δίπλα σας την κούπα με τον αγαπημένο καφέ ή τσάι; Ας ξεκινήσουμε…

Mercurial: Δουλέψτε ευκολότερα, δουλέψτε ταχύτερα

Αποτελεί εργαλείο που απευθύνεται κυρίως σε ανθρώπους που ασχολούνται με την ανάπτυξη λογισμικού. Πρόκειται για μια εφαρμογή ανοικτού λογισμικού (δηλαδή ο κώδικας διατίθεται ελεύθερα προς χρήση και τροποποίηση) η οποία λειτουργεί σε Windows, Mac OS X και στα περισσότερα συστήματα τύπου UNIX. Αποστολή του είναι η ομαδική ανάπτυξη ενός έργου λογισμικού με ταυτόχρονη παρακολούθηση, καταγραφή και τήρηση ιστορικού των αλλαγών που γίνονται από τους προγραμματιστές που συμμετέχουν στο έργο. Παρακολουθούνται αρχεία τύπου text αλλά και binary αρχεία.

Η εφαρμογή διατίθεται κάτω από άδεια GNU GPL ενώ ο δημιουργός και κύριος προγραμματιστής του έργου είναι ο Matt Mackall. Η υλοποίησή της βασίζεται στις γλώσσες Python και C.

Επίσημη ιστοσελίδα: http://mercurial.selenic.com/

Gwibber: Microblogging Freedom

Η εφαρμογή gwibber αποτελεί μια δωρεάν εφαρμογή πελάτη για τη διαχείριση γνωστών ιστοσελίδων κοινωνικής δικτύωσης (Twitter, Identi.ca, StatusNet, Facebook, FriendFeed, Digg, Flickr, Qaiku). Είναι φτιαγμένη για εμφανίζει στον χρήστη, ανά πάσα στιγμή, διαφορετικές ροές. Απευθύνεται σε λειτουργικά συστήματα Linux (είναι μάλιστα προεγκατεστημένη στην έκδοση 10.04 της διανομής Ubuntu).

Επίσημη ιστοσελίδα: http://gwibber.com/

Emesen: An IM for the WLM^TM network

Πρόκειται για μία από τις αγαπημένες μου εφαρμογές για λειτουργικά συστήματα Linux. Αντικαθιστά επάξια το MSN των Windows.

Αποστολή του είναι να «αντιγράψει» τις ιδιότητες του MSN προσφέροντας στον χρήστη Linux Λειτουργικών συστημάτων ένα εύχρηστο αλλά παράλληλα οικείο περιβάλλον αποστολής προσωπικών μηνυμάτων.

Λειτουργεί άψογα με λογαριασμούς Microsoft και φυσικά διατίθεται δωρεάν με άδεια GNU GPL.

Όπως και πριν, το Emesen είναι γραμμένο σε Python.

Επίσημη ιστοσελίδα: http://www.emesene.org/

Trac: Integrated SCM & Project Management

Ακόμη ένα εξαιρετικό εργαλείο για ανάπτυξη και εκσφαλμάτωση λογισμικού γραμμένο αποκλειστικά σε Python. Διατίθεται δωρεάν και αποτελεί λογισμικό ανοικτού κώδικα. Η αρχική του ονομασία ήταν svntrac λόγω της ικανότητάς του να συνεργάζεται με το Subversion.

Επίσημη ιστοσελίδα: http://trac.edgewall.org/

(+1) Django: Web framework για τελειομανείς με deadlines

Το Jango αποτελεί στην κυριολεξία ένα trend της εποχής. Πρόκειται για ένα Web Framework που διατίθεται δωρεάν κάτω από BSD License και φυσικά ο κώδικάς του είναι ανοικτός. Η μυστήρια ονομασία του προέρχεται από τον τσιγγάνο κιθαρίστα Django Reinhardt. Είναι γραμμένο εξ’ ολοκλήρου σε Python.

Επίσημη ιστοσελίδα: http://www.djangoproject.com

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

Μέχρι την επόμενη λοιπόν φορά που θα τα πούμε…

…να είστε καλά και να προσέχετε τον εαυτό σας.

Urban Scrawl

Complete Tree Brushes

Old Photoshop Brushes

Buble Brushes

Ecol Brushes

Στο τέλος του οδηγού θα μπορούμε:

• Να κάνουμε χρήση των κλασικών JQuery selectors
• Να κάνουμε χρήση των ιεραρχικών JQuery selectors

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.

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

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)

Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

• Τις δύο εκδόσεις της JQuery
• Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

• Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
• Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Τι είναι οι JQuery Selectors;

Αναρωτηθήκατε ποτέ γιατί η JQuery ονομάστηκε έτσι; Πολλοί από εσάς ίσως αναγνωρίζουν το J σαν συντομογραφία της JavaScript αλλά, το Query που κολλάει;

Θα σας βοηθήσω. Η έννοια query είναι γνωστότερη στην περιοχή των βάσεων δεδομένων όπου περιγράφει μία ερώτηση, μία αναζήτηση αν θέλετε, του χρήστη ως προς τη βάση δεδομένων με σκοπό να του επιστραφεί το σύνολο των εγγραφών, των στοιχείων δηλαδή της βάσης δεδομένων, που ικανοποιούν το ερώτημα αυτό. Σε μία βάση δεδομένων με τα δημογραφικά στοιχεία μιας χώρας για παράδειγμα ενδεικτικά queries θα μπορούσαν να είναι: «Αναζητώ όλους τους άνδρες με ηλικία άνω των 50 ετών», ή «Αναζητώ όλους τους κατοίκους της περιοχής Άνω Πόλη» ή «Αναζητώ γυναίκες μεταξύ 25 και 35 ετών που είναι ανύπαντρες» (ΟΚ το τελευταίο ακούγεται κάπως αλλά εν πάση περιπτώσει αντιλαμβάνεστε πως λειτουργεί ένα query).

Στην JQuery ένα query λειτουργεί με παρόμοιο τρόπο. Αναλαμβάνει να συλλέξει ένα σύνολο από τα στοιχεία που βρίσκονται στην υπό ανάπτυξη ιστοσελίδα ώστε να μπορέσει στη συνέχεια, ο προγραμματιστής, να επέμβει σε αυτά (είτε αισθητικά, είτε λειτουργικά). Τον ρόλο των queries στην JQuery βιβλιοθήκη παίζουν δύο ομάδες συναρτήσεων που ονομάζονται Selectors και Filters αντίστοιχα. Σήμερα θα ασχοληθούμε με τους Selectors.

Κάτι μου θυμίζει…

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

JQuery selectors. Πλοηγηθείτε στα στοιχεία της ιστοσελίδας σας.

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

Αντίστοιχα ο κώδικας του αρχείου χωρίς το κομμάτι της JQuery είναι ο ακόλουθος:

<html>

<head>

<title>JQuery Selectors | GreekTuts.net</title>

</head>

<body>

<h1 id="header">Μια επικεφαλίδα</h1>

<p>Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου.</p>

<p id="secondparagraph">Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος.</p>

<table>

<tr>

<td>Δεδομένο 1.1</td>

<td>Δεδομένο 1.2</td>

<td>Δεδομένο 1.3</td>

</tr>

<tr>

<td>Δεδομένο 2.1</td>

<td>Δεδομένο 2.2</td>

<td>Δεδομένο 2.3</td>

</tr>

<tr>

<td>Δεδομένο 3.1</td>

<td>Δεδομένο 3.2</td>

<td class="someclass">Δεδομένο 3.3</td>

</tr>

</table>

<p>3η παράγραφος...</p>

<p>4η <b>παράγραφος...</b> ( μπορεί να γίνεται <b>κουραστικό</b> αλλά είναι για καλό σκοπό   )</p>

</body>

</html>

Ας πάμε να εμπλουτίσουμε τον κώδικά μας με λίγο JQuery και να δούμε πως μπορούμε να επιλέξουμε κάποια από τα στοιχεία στην ιστοσελίδα μας. Υπενθυμίζω ότι ο κώδικας JQuery μπαίνει στο τμήμα <head> … </head> της ιστοσελίδας μας και αρχίζει πάντοτε με την συμπερίληψη της βιβλιοθήκης JQuery.

<script src="jquery-1.4.2.min.js"></script>

Στη συνέχεια πρέπει να δηλώσουμε στον browser ότι θέλουμε ο JQuery κώδικάς μας να εκτελεστεί όταν φορτώνεται η ιστοσελίδα. Για τον λόγο αυτό δηλώνουμε την παρακάτω συνάρτηση μέσα στην οποία θα πειραματιστούμε (τώρα και σε όλα τα υπόλοιπα άρθρα της σειράς)

<script>

$("document").ready(function() {

//κώδικας

});

</script>

Μερικοί απλοί selectors

Πριν ξεκινήσουμε 1 – 2 διευκρινήσεις:

• HTML tag: Ένα html tag είναι μια λέξη κλειδί (εντολή) της html. Π.χ. <body>, <p>, <li>, <b>, κλπ.
• .css(…): Συνάρτηση της JQuery που επεμβαίνει στο CSS του στοιχείου που προηγείται της τελείας και επιδρά με τον τρόπο που περιγράφουν τα ορίσματα της παρένθεσης. Στο σημερινό άρθρο θα συναντήσετε την δήλωση css(“border”, “thin solid red”). Αυτό που πρακτικά κάνει είναι να περικλείει το / τα επιλεγμένο(α) στοιχείο(α) σε ένα κόκκινο πλαίσιο ώστε να μπορείτε να δείτε το αποτέλεσμα του JQuery κώδικα κάθε φορά. Θα σας πρότεινα να αγνοήσετε τον τρόπο που λειτουργεί για την ώρα. Επικεντρωθείτε στους selectors.
• Σχόλια JQuery ( // ): Όπως σε κάθε γλώσσα προγραμματισμού έτσι και στην JQuery υπάρχει η δυνατότητα δήλωσης σχολίων. Αυτή γίνεται με την προσθήκη των χαρακτήρων // μπροστά από τη γραμμή που θέλουμε να προσδιορίσουμε ως σχόλιο. Στο σημερινό παράδειγμά μας (που μπορείτε να κατεβάσετε στο τέλος του άρθρου) θα βρείτε συγκεντρωμένους όλους τους selectors που θα παρουσιάσουμε. Για να μην μπερδευτείτε, τους δίνουμε υπό μορφή σχολίων. Κάθε φορά που θέλετε να δοκιμάσετε κάποιον το μόνο που έχετε να κάνετε είναι να αφαιρέσετε το // μπροστά από τη γραμμή που σας ενδιαφέρει (και φυσικά να προσθέσετε // σε όλες τις υπόλοιπες) ώστε να είναι ενεργοποιημένος μόνον ένας selector κάθε φορά.

Επιλογή όμοιων tags

$("p").css("border", "thin solid red")

Ο παραπάνω selector θα επιλέξει όλα τα στοιχεία <p> που βρίσκονται στην ιστοσελίδα μας. Όπως παρατηρείτε ο selector δεν είναι τίποτε άλλο παρά το σήμα κατατεθέν της JQuery (δηλαδή το $) ακολουθούμενο από τον προσδιοριστή που θέλουμε, στην περίπτωσή μας το p κλεισμένο σε παρενθέσεις και διπλά εισαγωγικά. Παρατηρήστε ότι βάζουμε την περιγραφή του tag μόνο, χωρίς τα < > στα οποία περικλείεται κανονικά.

Επιλογή στοιχείων με ίδια κλάση

$(".someclass").css("border", "thin solid red")

Πολλές φορές ρυθμίζουμε την εμφάνιση συγκεκριμένων στοιχείων κάνοντας χρήση κλάσεων CSS. Με τον selector $(“.myClass”) μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας που ανήκουν σε αυτήν την κλάση.

Επιλογή στοιχείου με βάση το id

$("#header").css("border", "thin solid red")

Ένας άλλος μηχανισμός που προσφέρεται από τα CSS είναι τα ids. Ο selector $(“#id”) μας επιτρέπει να διαχειριστούμε στοιχεία με ids μέσω της JQuery.

Επιλογή στοιχείων με βάση το tag και την κλάση

$("td.someclass").css("border", "thin solid red")

Είναι εφικτό να υπάρξουν συνδυαστικοί selectors. Ο παραπάνω επιλέγει όλα τα tags τύπου td που όμως ανήκουν στην κλάση someclass.

Επιλογή στοιχείων με βάση το tag, το id και την κλάση

$("p#secondparagraph.someclass").css("border", "thin solid red")

Σε αυτόν τον πολύ συγκεκριμένο selector γίνεται χρήση των μηχανισμών του id και της κλάσης. Πιο συγκεκριμένα θα επιλεγεί εκείνο το στοιχείο με id secondparagraph και κλάση someclass.

Selectors ιεραρχίας

Εκτός από τους παραπάνω selectors υπάρχει και μία ομάδα selectors που σχετίζονται  με την ιεραρχία των στοιχείων μέσα με μια ιστοσελίδα. Ας τους δούμε έναν – έναν.

Επιλογή στοιχείων παιδιών

$("tr > td").css("border", "thin solid red")

Ο selector $(“a > b”) επιλέγει όλα τα tags τύπου b που αποτελούν παιδιά του tag a (βρίσκονται δηλαδή ακριβώς ένα επίπεδο κάτω από το b). Στην προκειμένη περίπτωση θα επιλεγούν όλα τα td tags που είναι άμεσα παιδιά ενός tr tag (μην βιαστείτε να σκεφθείτε… «μα ένα td πάντα περιέχεται σε ένα tr» γιατί τα μάτια μου έχουν δει πολλά J ).

Επιλογή απογόνων

$("p b").css("border", "thin solid red")

Λειτουργεί όπως και ο a > b selector με τη διαφορά ότι δεν περιορίζεται σε άμεσα παιδιά. Με τον selector $(“a b”) μας επιστρέφεται μία λίστα με όλα τα tags b που αποτελούν απογόνους του a όσα επίπεδα κάτω και αν βρίσκονται από το a.

Επιλογή επομένου στοιχείου

$("table + p").css("border", "thin solid red")

Ο selector $(“a + b”) επιστρέφει το αμέσως επόμενο tag τύπου b που βρίσκεται μετά το tag a. Στο παράδειγμά μας θα επιστραφεί η αμέσως επόμενη παράγραφος μετά τον πίνακα.

Επιλογή συγγενικού στοιχείου (ή αδερφού κόμβου)

$("table ~ p").css("border", "thin solid red")

Ο selector $(“a ~ b”) επιστρέφει όλους τους αδερφούς κόμβους του a που είναι τύπου b. Στο συγκεκριμένο παράδειγμα θα επιστραφούν όλες οι παράγραφοι που αποτελούν συγγενικούς κόμβους του πίνακα της ιστοσελίδα μας.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε. Ως την επόμενη συνάντησή μας…

Να είστε καλά και να φροντίζεται τον εαυτό σας.

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

Βήμα 1

Ξεκινάμε δημιουργώντας ένα νέο καμβά (500 x 300 pix.) και εισάγουμε ένα κείμενο.

Βήμα 2

Κάνουμε δεξί click στο κείμενο που δημιουργήσαμε και επιλέγουμε το “Ραστεροποίηση κειμένου” (rasterize layer).

Βήμα 3

Στην συνέχεια, έχοντας επιλεγμένο το κείμενο, πηγαίνουμε στην επεξεργασία/μετασχηματισμός/προοπτική (edit/transform/perspective) και μετακινούμε το κείμενό μας οριζόντια.

Βήμα 4

Για να κάνετε πιο όμορφο το τρισδιάστατο κείμενό σας, μπορείτε προαιρετικά να επιλέξετε επεξεργασία/μετασχηματισμός/παραμόρφωση (edit/transform/distort) και να μετακινήσετε προς τα μέσα την μια γωνία του κειμένου σας.

Βήμα 5

Σε αυτό το σημείο, έχοντας πάντα επιλεγμένο το κείμενό μας, κρατάμε πατημένο από το πληκτρολόγιο μας το αριστερό ctrl + alt και πατάμε γύρω στις 20 με 25 φορές το πάνω βελάκι (ο αριθμός είναι ενδεικτικός, καθώς εάν δημιουργήσετε ένα μεγαλύτερο κείμενο οι 20 φορές ίσως είναι λίγες και πιθανόν να επαναλαμβάνετε την διαδικασία μέχρι να φτάσετε στις 30 με 35 φορές). Θα δείτε ότι το κείμενο να παίρνει όγκο.

Βήμα 6

Τώρα επιλέξτε όλα τα επίπεδα (layers) που δημιουργήσατε, εκτός από το πρώτο και το τελευταίο και πηγαίνετε στο επίπεδο/συγχώνευση επιπέδων (layer/merged linked).

Βήμα 7

Τέλος μπορείτε πια να δώσετε χρώμα στο τρισδιάστατο κείμενό σας, κάνοντας διπλό click στο layer που κάνατε συγχώνευση (merged linked), επιλέγοντας το “επικάλυψη ντεκαρτέ” (gradient overlay) για να δείτε την διαφορά.

Σημείωση: Μπορείτε επίσης να προσθέσετε περισσότερα εφέ στο κείμενο σας μέσα από το μενού στιλ επιπέδου (layer style).

Τελικό Αποτέλεσμα

Ακολουθήστε και εσείς τα βήματα και δείξτε μας τι μπορείτε να φτιάξετε…

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