<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="message-board.c" xml:lang="el">

  <info>
    <title type="text">Πίνακας μηνύματος (C)</title>
    <link type="guide" xref="c#examples"/>

    <desc>Ένα απλό πρόγραμμα που χρησιμοποιεί WebKitGTK+ και DOM.</desc>

    <revision pkgversion="0.1" version="0.1" date="2010-12-06" status="draft"/>
    <credit type="author copyright">
      <name>Shaun McCance</name>
      <email its:translate="no">shaunm@gnome.org</email>
      <years>2010</years>
    </credit>
    <credit type="editor">
      <name>Marta Maria Casetti</name>
      <email its:translate="no">mmcasetti@gmail.com</email>
      <years>2013</years>
    </credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Ελληνική μεταφραστική ομάδα GNOME</mal:name>
      <mal:email>team@gnome.gr</mal:email>
      <mal:years>2012-2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Δημήτρης Σπίγγος</mal:name>
      <mal:email>dmtrs32@gmail.com</mal:email>
      <mal:years>2012, 2013</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Μαρία Θουκιδίδου</mal:name>
      <mal:email>marablack3@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Θάνος Τρυφωνίδης</mal:name>
      <mal:email>tomtryf@gmail.com</mal:email>
      <mal:years>2014, 2015</mal:years>
    </mal:credit>
  </info>

<title>Πίνακας μηνύματος</title>

<synopsis>
  <p>Σε αυτό το μάθημα, θα μάθετε:</p>
  <list style="compact">
    <item><p>Πώς να εμφανίσετε μια ιστοσελίδα με WebKit.</p></item>
    <item><p>Πώς να χειριστείτε τα περιεχόμενα μιας ιστοσελίδας χρησιμοποιώντας τις συναρτήσεις DOM του WebKit.</p></item>
  </list>
  <p>Αυτό το μάθημα υποθέτει εξοικείωση με τη γλώσσα προγραμματισμού C και βασική κατανόηση της GTK+, συμπεριλαμβανόμενης της δημιουργίας και τοποθέτησης γραφικών στοιχείων και της σύνδεσης συναρτήσεων επανάκλησης σε σήματα. Δείτε <link xref="image-viewer.c"/> για να μάθετε τα βασικά του GTK+.</p>
</synopsis>

<media type="video" mime="video/ogg" src="media/message-board.ogv"/>

<links type="section"/>

<section id="create">
  <title>Δημιουργία έργου με το Anjuta</title>

  <p>Το GNOME περιέχει το WebKitGTK+, κατασκευασμένο πάνω στον ισχυρό σκελετό του WebKit HTML. Το WebKit χρησιμοποιείται μέσα από το GNOME, όχι μόνο για προβολή ιστοσελίδων στο διαδίκτυο, αλλά επίσης για δημιουργία πλούσιων διεπαφών χρήστη που μπορούν εύκολα να μορφοποιηθούν με CSS.</p>

  <p>Σε αυτό το μάθημα, θα δημιουργήσετε ένα απλό πίνακα μηνύματος χρησιμοποιώντας WebKit. Ο πίνακας μηνύματος θα επιτρέψει την εισαγωγή κάποιου κειμένου και την προσθήκη του σε μια λίστα μηνυμάτων σε HTML. Πριν την εκκίνηση, χρειαζόσαστε να ρυθμίσετε ένα έργο στο Anjuta.</p>

  <steps>
    <item><p>Στο Anjuta, κάντε κλικ στο <guiseq><gui>Αρχείο</gui><gui>Νέο</gui> <gui>Έργο</gui></guiseq> για να ανοίξετε τον νέο βοηθό έργου.</p></item>
    <item><p>Επιλέξτε <gui>GTK+ (απλό)</gui> στην καρτέλα <gui>C</gui> και κλικ <gui>συνέχεια</gui>.</p></item>
    <item><p>Συμπληρώστε τις λεπτομέρειές σας στη σελίδα <gui>βασικές πληροφορίες</gui>. Χρησιμοποιήστε <input>πίνακα μηνύματος</input> για το όνομα του έργου. Κλικ <gui>συνέχεια</gui>.</p></item>
    <item><p>Απενεργοποιήστε την επιλογή <gui>χρήση GtkBuilder για διεπαφή χρήστη</gui> καθώς αυτό το μάθημα κατασκευάζει τη διεπαφή χρήστη χειροκίνητα.</p>
    </item>
    <item><p>Πρέπει να πείτε στο Anjuta ότι χρησιμοποιείτε WebKitGTK+ για αυτό το έργο. Στη σελίδα <gui>επιλογές έργου</gui>, επιλέξτε <gui>ρύθμιση εξωτερικών πακέτων</gui>. Κλικ <gui>συνέχεια</gui>. Στη σελίδα <gui>ρύθμιση εξωτερικών πακέτων</gui>, σημειώστε <gui>webkitgtk-3.0</gui>.</p></item>
  </steps>

  <p>Αφού τελειώσετε με τον βοηθό του νέου έργου, ανοίξτε το αρχείο <file>src/main.c</file> είτε από το <gui>έργο</gui> ή από την καρτέλα <gui>αρχείο</gui>. Το Anjuta θα το γεμίσει με κάποιο βασικό κώδικα GTK+ από τα πρότυπά του. Αφού δημιουργείτε ένα έργο WebKit, χρειάζεστε πρώτα να συμπεριλάβετε τις κεφαλίδες WebKit. Μετά τη γραμμή που περιέχει <code>gtk/gtk.h</code>, προσθέστε την παρακάτω γραμμή:</p>

  <code>#include &lt;webkit/webkit.h&gt;</code>

  <p>Επιβεβαιώστε ότι όλα δουλεύουν με την κατασκευή που έχετε κάνει μέχρι τώρα. Κλικ <guiseq><gui>κατασκευή</gui><gui>έργο κατασκευής</gui></guiseq> ή απλά πατήστε <keyseq><key>Shift</key><key>F7</key></keyseq>. Την πρώτη φορά που κατασκευάζετε, θα σας ζητηθεί για κάποιες επιλογές ρύθμισης. Απλά αποδεχτείτε τις προεπιλογές και κλικ <gui>εκτέλεση</gui>.</p>

  <p>Τώρα θα μπορείτε να τρέξετε το πρόγραμμα. Κάντε κλικ στο <guiseq> <gui>Τρέξιμο</gui><gui>Εκτέλεση</gui></guiseq> ή απλά πατήστε <key>F3</key>. Θα πρέπει να δείτε ένα άδειο παράθυρο.</p>
</section>

<section id="webview">
  <title>Διευθέτηση του παραθύρου σας και προβολή ιστού</title>

  <p>Τώρα που μπορείτε να δείτε ένα παράθυρο, είναι καιρός να ξεκινήσετε δουλειά με το WebKit. Για αυτό το μάθημα, θα δημιουργηθεί μια καταχώριση κειμένου και μια προβολή ιστού και πακετάρισμα τους σε ένα παράθυρο. Βρείτε τη συνάρτηση <code>create_window</code> και αντικαταστήστε την με την παρακάτω:</p>

<code style="numbered" mime="text/C">
static GtkWidget*
create_window (void)
{
    GtkWidget *window, *box, *scroll, *view, *entry;

    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size (GTK_WINDOW (window), 400, 400);
    gtk_window_set_title (GTK_WINDOW (window), "Message Board");
    g_signal_connect (window, "delete-event", G_CALLBACK (gtk_main_quit), NULL);

    box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 6);
    gtk_container_set_border_width (GTK_CONTAINER (box), 6);
    gtk_container_add (GTK_CONTAINER (window), box);

    entry = gtk_entry_new ();
    gtk_box_pack_start (GTK_BOX (box), entry, FALSE, FALSE, 0);

    scroll = gtk_scrolled_window_new (NULL, NULL);
    g_object_set (scroll, "shadow-type", GTK_SHADOW_IN, NULL);
    gtk_box_pack_start (GTK_BOX (box), scroll, TRUE, TRUE, 0);

    view = webkit_web_view_new ();
    gtk_container_add (GTK_CONTAINER (scroll), view);
    webkit_web_view_load_string (WEBKIT_WEB_VIEW (view),
                                 "&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;",
                                 "text/html",
                                 "UTF-8",
                                 NULL);

    gtk_widget_show_all (GTK_WIDGET (box));
    return window;
}
</code>

  <p>Δημιουργήστε πρώτα ένα αντικείμενο <code>GtkWindow</code> και ορίστε τον τίτλο το προεπιλεγμένο μέγεθος του. Συνδέστε επίσης τη συνάρτηση <code>gtk_main_quit</code> με το σήμα <code>delete-event</code>. Το σήμα <code>delete-event</code> εκπέμπεται όταν το παράθυρο κλείνει. Η συνάρτηση <code>gtk_main_quit</code> είναι τμήμα του GTK και εγκαταλείπει την εφαρμογή.</p>

  <p>Έπειτα δημιουργήστε ένα κάθετο πλαίσιο και προσθέστε το στο παράθυρο. Ένα παράθυρο μπορεί να κρατά μόνο ένα μοναδικό θυγατρικό γραφικό στοιχείο, έτσι χρειαζόσαστε τη χρήση ενός πλαισίου για προσθήκη πολλαπλών γραφικών στοιχείων. Το δεύτερο όρισμα στο <code>gtk_box_new</code> ορίζει την ποσότητα συμπλήρωσης (σε εικονοστοιχεία) μεταξύ κάθε θυγατρικού και η επόμενη γραμμή βάζει ένα περίγραμμα έξη εικονοστοιχείων γύρω από όλο το αντικείμενο.</p>

  <p>Έπειτα δημιουργείστε ένα αντικείμενο <code>GtkEntry</code> και πακετάρετε το στο πλαίσιο. Το τρίτο και τέταρτο όρισμα στο <code>gtk_box_pack_start</code> καθορίζει ότι η καταχώριση δεν θα πρέπει να πάρει επιπλέον χώρο που το πλαίσιο έχει διαθέσιμο. Το τέταρτο όρισμα είναι η ποσότητα συμπλήρωσης που θέλετε γύρω από την καταχώριση. Σε αυτή την περίπτωση, ορίζετε τη συμπλήρωση σε μηδέν, επειδή επιτρέπετε στο πλαίσιο να χειριστεί όλη τη συμπλήρωση.</p>

  <p>Πριν την προσθήκη μιας προβολής ιστού, πρέπει να δημιουργήσετε ένα κυλιόμενο παράθυρο για να μπει μέσα του. Το κυλιόμενο παράθυρο θα τοποθετήσει γραμμές κύλισης στα δεξιά και κάτω όταν χρειάζεται και θα αποτρέψει την προβολή σας ιστού από το γέμισμα όλης της οθόνης. Αυτή τη φορά, περνάτε <code>TRUE</code> και <code>TRUE</code> στο <code>gtk_box_pack_start</code> για να επιτρέψετε στο κυλιόμενο παράθυρο (και συνεπώς στην προβολή ιστού) να χρησιμοποιήσει οποιοδήποτε διαθέσιμο χώρο στο πλαίσιο.</p>

  <p>Τελικά, δημιουργείτε ένα <code>WebKitWebView</code> και το προσθέτετε στο κυλιόμενο παράθυρο. Έπειτα φορτώνετε μια πολύ βασική σελίδα HTML στην προβολή ιστού καλώντας <code>webkit_web_view_load_string</code> με τα παρακάτω ορίσματα:</p>

  <terms>
    <item>
      <title><code>WEBKIT_WEB_VIEW (view)</code></title>
      <p>Η ίδια η προβολή. Επειδή η <code>view</code> πληκτρολογείτε ως <code>GtkWidget</code>, πρέπει να χρησιμοποιήσετε <code>WEBKIT_WEB_VIEW</code> για ασφαλή αλλαγή του αντικειμένου.</p>
    </item>
    <item>
      <title><code>"&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;"</code></title>
      <p>Το απλούστερο αρχείο HTML που θα μπορούσατε να γράψετε.</p>
    </item>
    <item>
      <title><code>"text/html"</code></title>
      <p>Ο τύπος MIME του περιεχομένου που δίνετε. Σε αυτήν την περίπτωση, χρησιμοποιείτε απλό HTML.</p>
    </item>
    <item>
      <title><code>"UTF-8"</code></title>
      <p>Η κωδικοποίηση χαρακτήρα του παρεχόμενου περιεχομένου. Αν και χρησιμοποιείτε μόνο ASCII χαρακτήρες, είναι καλή ο καθορισμός UTF-8. Το UTF-8 χρησιμοποιείται ως η προεπιλεγμένη κωδικοποίηση ολοκληρωτικά στο GNOME.</p>
    </item>
    <item>
      <title><code>NULL</code></title>
      <p>Η βάση URI. Δεν την χρειαζόσαστε σε αυτό το απλό παράδειγμα, αλλά ίσως θελήσετε να δώσετε ένα <sys>file:</sys> URI εάν προσθέσετε εικόνες ή άλλα χαρακτηριστικά που θέλετε να χρησιμοποιήσετε σχετικές αναφορές URI.</p>
    </item>
  </terms>

  <note style="sidebar">
    <p>Κάθε φορά που προσθέτετε ένα γραφικό στοιχείο, πρέπει να καλέσετε <code>gtk_widget_show</code> για να γίνει ορατό. Εάν καλέσετε <code>gtk_widget_show_all</code> σε ένα περιέκτη γραφικού στοιχείου όπως <code>GtkBox</code>, το GTK+ θα εμφανίσει αυτόματα όλα τα γραφικά στοιχεία μέσα στον περιέκτη, σε οποιοδήποτε βάθος. Μερικές φορές δεν θέλετε να καλέσετε <code>gtk_widget_show_all</code>, όπως όταν θέλετε να κρύψετε δυναμικά και να εμφανίσετε μερικά γραφικά στοιχεία σε απάντηση συμβάντων.</p>
  </note>

  <p>Τελικά, πρέπει να καλέσετε <code>gtk_widget_show_all</code> στο πλαίσιο. Αλλιώς, κανένα από τα γραφικά στοιχεία που δημιουργήσατε δεν θα είναι ορατό. (Το παράθυρο εμφανίζεται στη συνάρτηση <code>main</code> με <code>gtk_widget_show</code>.)</p>

  <p>Αναπτύξτε και εκτελέστε ξανά τον πίνακα μηνύματος. Πρέπει να δείτε ένα παράθυρο με μια καταχώριση κειμένου και μια προβολή ιστού. Δεν κάνει τίποτα ακόμα, επειδή η καταχώριση κειμένου και η προβολή ιστού δεν ξέρουν τίποτα μεταξύ τους.</p>
</section>

<section id="signals">
  <title>Σύνδεση σημάτων</title>

  <p>Τώρα, θέλετε να κάνετε τον πίνακα μηνύματος στην πραγματικότητα <em>να κάνει</em> κάτι όταν εισάγετε κείμενο στην καταχώριση κειμένου. Για να το κάνετε αυτό, συνδέστε μια συνάρτηση επανάκλησης στο σήμα <code>activate</code> του <code>entry</code>. Το GTK+ εκπέμπει το σήμα <code>activate</code> όταν ο χρήστης πατά <key>Enter</key> στην καταχώριση. Προσθέστε το παρακάτω στο <code>create_window</code>, οπουδήποτε αφού και <code>entry</code> και <code>view</code> οριστούν:</p>

<code>
g_signal_connect (entry, "activate", G_CALLBACK (entry_activate_cb), view);
</code>

  <p>Τότε πρέπει στην πραγματικότητα να ορίσετε το <code>entry_activate_cb</code>. Ορίστε το όπως ακολουθεί, οπουδήποτε πάνω από το <code>create_window</code>:</p>

<code style="numbered">
static void
entry_activate_cb (GtkEntry *entry, WebKitWebView *view)
{
    WebKitDOMDocument *document;
    WebKitDOMElement *body, *div;

    document = webkit_web_view_get_dom_document (view);
    body = webkit_dom_document_query_selector (document, "body", NULL);
    div = webkit_dom_document_create_element (document, "div", NULL);
    webkit_dom_node_set_text_content (WEBKIT_DOM_NODE (div),
                                      gtk_entry_get_text (entry),
                                      NULL);
    webkit_dom_node_append_child (WEBKIT_DOM_NODE (body),
                                  WEBKIT_DOM_NODE (div),
                                  NULL);
    gtk_entry_set_text (entry, "");
}
</code>

  <p>Το πρώτο πράγμα είναι να πάρετε ένα αντικείμενο <code>WebKitDOMDocument</code> που αντιπροσωπεύει το εμφανιζόμενο έγγραφο στο <code>view</code>. Οι κλάσεις DOM και οι μέθοδοι στο WebKit επιτρέπουν την επιθεώρηση και χειρισμό του εγγράφου HTML και δουλεύουν πολύ παρόμοια με τα APIs DOM που ήδη μπορεί να ξέρετε από το JavaScript.</p>

  <p>Μόλις έχετε το έγγραφο, παίρνετε το στοιχείο <code>body</code>, έτσι ώστε να μπορείτε να προσθέσετε τα στοιχεία <code>div</code> σε αυτό. Η συνάρτηση <code>webkit_dom_document_query_selector</code> επιτρέπει την εύρεση ενός στοιχείου στο έγγραφο χρησιμοποιώντας επιλογείς CSS. Αυτό σας γλυτώνει από το γράψιμο κουραστικών βρόχων για πέρασμα του εγγράφου.</p>

  <p>Μετά, δημιουργείτε ένα νέο στοιχείο <code>div</code> για κράτημα του μηνύματος. Κάθε στοιχείο που δημιουργείτε πρέπει να προσαρτηθεί σε ένα έγγραφo, έτσι η συνάρτηση στη δημιουργία ενός στοιχείου παίρνει το <code>WebKitDOMDocument</code> ως τα πρώτα της ορίσματα. Έπειτα ορίζετε το περιεχόμενο κειμένου του στοιχείου στα περιεχόμενα της καταχώρισης κειμένου. Επειδή το <code>gtk_entry_get_text</code> επιστρέφει το <code>const gchar*</code>, δεν πρέπει να απελευθερώσετε το αποτέλεσμα.</p>

  <p>Τελικά, προσαρτάτε το νέο στοιχείο <code>div</code> στο σώμα και καθαρίστε την καταχώριση κειμένου, έτσι ώστε να μπορείτε να τυπώσετε κάτι νέο. Κατασκευή και εκτέλεση του προγράμματος ξανά και έλεγχος του για σας.</p>
</section>


<section id="css">
  <title>Κάντε το να φαίνεται καλύτερα με CSS</title>

  <p>Σε αυτό το σημείο, το πρόγραμμά σας είναι ολότελα λειτουργικό, αλλά όχι πολύ όμορφο. Μπορείτε να μορφοποιήσετε την εμφάνιση μηνύματος με CSS, απλά όπως μπορείτε με κάθε άλλη σελίδα HTML. Υπάρχουν πολλοί τρόποι που θα μπορούσατε να προσαρτήσετε μερικά CSS στη σελίδα: Μπορείτε να τα προσθέσετε στο αρχικό έγγραφο HTML. Θα μπορούσατε να το ενσωματώσετε στο γνώρισμα <code>style</code> των στοιχείων <code>div</code>. Θα μπορούσατε ακόμα να το κατασκευάσετε προγραμματιστικά χρησιμοποιώντας τα APIs DOM.</p>

  <p>Σε αυτό το μάθημα, θα επισυνάψετε το CSS χρησιμοποιώντας την ιδιότητα <code>user-stylesheet-uri</code> του προσαρτημένου αντικειμένου <code>WebKitWebSetting</code> στην προβολή σας ιστού. Σε μια πιο πλήρη εφαρμογή, θα θέλατε να αποθηκεύσετε και να φορτώσετε το αρχείο HTML. Διατηρώντας τις πληροφορίες μορφοποίησης έξω από το ενεργό HTML σημαίνει ότι μπορείτε να αλλάξετε ολότελα τη μορφοποίηση μες την εφαρμογή σας, χωρίς να χρειαστεί να αλλάξετε τα αρχεία χρήστη. Κανονικά θα εγκαταστήσετε απλά ένα αρχείο μαζί με την εφαρμογή σας, αλλά για να διατηρήσετε απλά κάθε τι σε ένα αρχείο για αυτή την παρουσίαση, θα χρησιμοποιήσουμε ένα κόλπο που λέγεται δεδομένα URI. Πρώτα, ορίστε το CSS ως στατική συμβολοσειρά κοντά στην κορυφή του αρχείου σας.</p>

<code>
static const guchar CSS[] =
"body { margin: 0; padding: 0; }\n"
"div { "
" -webkit-border-radius: 2px;"
" background: -webkit-gradient(linear, 0% 100%, 0% 0%,"
" from(#f1f1f1), to(white));"
" border: solid 1px #c6c6c6;"
" -webkit-box-shadow: 0px 0px 2px #c6c6c6;"
" margin: 12px; padding: 6px;"
"}";
</code>

  <p>Ό,τι έχετε σε αυτό το παράδειγμα είναι στοιχεία <code>div</code> μέσα σε ένα στοιχείο <code>body</code>. Εάν δημιουργήσατε πιο περίπλοκα HTML, θα μπορούσατε να χρησιμοποιήσετε οποιοδήποτε CSS είναι απαραίτητο. Στην πραγματικότητα, εάν είσαστε άνετα με CSS, θα πρέπει να προσπαθήσετε να το αλλάξετε με κάτι που σας αρέσει καλύτερα.</p>

  <p>Για εφαρμογή του CSS, ορίζετε τον <code>user-stylesheet-uri</code> στην συνάρτηση <code>create_window</code>, οπουδήποτε μετά τον ορισμό του <code>view</code>.</p>

<code>
tmp = g_base64_encode (CSS, strlen((gchar *) CSS));
css = g_strconcat ("data:text/css;charset=utf-8;base64,",
                   tmp, NULL);
g_object_set (webkit_web_view_get_settings (WEBKIT_WEB_VIEW (view)),
              "user-stylesheet-uri", css, NULL);
g_free (css);
g_free (tmp);
</code>

  <p>Επίσης, βεβαιωθείτε να προσθέσετε δηλώσεις μεταβλητής για <code>tmp</code> και <code>css</code> στην κορυφή του <code>create_window</code>.</p>

<code>
gchar *tmp, *css·
</code>

 <p>Δεδομένα URI ξεκινούν με <sys>data:</sys> και μερικές πληροφορίες για τον τύπο περιεχομένου και την κωδικοποίηση δεδομένων. Τα ενεργά δεδομένα ακολουθούν μετά το κόμμα, σε αυτήν την περίπτωση κωδικοποιημένα σε Base64. Αντίθετα με άλλα σχήματα URI όπως <sys>http:</sys>, <sys>ftp:</sys> και <sys>file:</sys>, το σχήμα <sys>data:</sys> URI δεν καθορίζει πού να βρείτε ένα αρχείο για φόρτωση. Μάλλον, δίνει τα συνολικά περιεχόμενα του αρχείου.</p>

 <p>Ο παραπάνω κώδικας πρώτα κωδικοποιεί τους ορισμούς σας CSS σε Base64, έπειτα συνδυάζει αυτό με σταθερή συμβολοσειρά για δημιουργία δεδομένων URI. Η συνάρτηση <code>g_strconcat</code> μπορεί να πάρει οποιοδήποτε αριθμό ορισμάτων συμβολοσειράς και να τα συνενώσει όλα μαζί, έτσι έχετε να περάσετε το <code>NULL</code> ως τελικό όρισμα για να γνωρίζει πότε να σταματήσει. Μην ξεχάσετε να ελευθερώσετε αυτές τις προσωρινές συμβολοσειρές αφού ορίσετε την ιδιότητα φύλλο μορφοποίησης.</p>

 <p>Κατασκευή και εκτέλεση του προγράμματος πάλι. Θα πρέπει τώρα να δουλεύει ακριβώς το ίδιο όπως στο τέλος της τελευταίας ενότητας, εκτός από τα μηνύματα που θα μορφοποιούνται όμορφα με περίγραμμα και λεπτή διαβάθμιση παρασκηνίου.</p>
</section>

<section id="more">
  <title>Μάθετε περισσότερα</title>

  <p>Αυτό το μάθημα δείχνει τη δημιουργία μιας βασικής εφαρμογής χρησιμοποιώντας GTK+ και WebKit, περιλαμβάνοντας την εμφάνιση ενός εγγράφου και επεξεργασία των δεδομένων του. Για τη δημιουργία μιας πραγματικής εφαρμογής, θα θέλετε προφανώς να κάνετε κάτι περισσότερο. Προσπαθήστε να προσθέσετε δικά σας χαρακτηριστικά. Να μερικές ιδέες:</p>

  <list>
    <item><p>Εάν είσαστε άνετοι με το CSS, δοκιμάστε να αλλάξετε τη μορφοποίηση της εμφάνισης του μηνύματος. Το CSS είναι εύκολο για να ξεκινήσετε, αλλά διαρκώς περισσότερο ισχυρό. Υπάρχει πλήθος μαθημάτων CSS στο διαδίκτυο και σχεδόν κάθε τι που μπορείτε να κάνετε στον ιστό, μπορείτε να το κάνετε με αυτήν την εφαρμογή.</p></item>

    <item><p>Τώρα αμέσως, χάνετε όλα τα μηνύματά σας όταν κλείνετε τον πίνακα μηνυμάτων. Δοκιμάστε να αποθηκεύσετε τα περιεχόμενα HTML μετά από κάθε ταχυδρόμηση και φορτώστε το αποθηκευμένο αρχείο (εάν υπάρχει) στην εκκίνηση.</p></item>

    <item><p>Αν κρατάτε τα μηνύματά σας για πολύ χρόνο, θα αρχίσετε να διερωτάστε πότε τα ταχυδρομήσατε. Προσθέσετε ένα σημάδι χρόνου σε κάθε μήνυμα όταν ταχυδρομείται. Θα θέλετε προφανώς να δημιουργήσετε μερικά πρόσθετα θυγατρικά στοιχεία <code>div</code> με διαφορετικές κλάσεις που μπορείτε να μορφοποιήσετε σε CSS.</p>
    </item>

    <item><p>Αυτό το πρόγραμμα κρατά τα μηνύματα για πάντα. Σκεφτείτε τρόπους που θα μπορούσαν να επιτρέψουν στο χρήστη να διαγράψει μηνύματα. Ίσως θέλετε τα μηνύματα να εξαφανίζονται αυτόματα όταν παλιώνουν, ή όταν υπάρχει ένας συγκεκριμένος αριθμός μηνυμάτων πριν από αυτά. Ή θα μπορούσατε να προσθέσετε έναν σύνδεσμο σε κάθε μήνυμα για διαγραφή του. Θα μπορούσατε ακόμα να αντικαταστήσετε το μενού περιεχομένου όταν κάνετε δεξιό κλικ σε μήνυμα. Αυτές τα χαρακτηριστικά περιέχουν περισσότερη περιήγηση του DOM API του WebKit.</p></item>
  </list>
</section>
</page>