Τι κώδικας είναι αυτός;

<span class="ryNqvb" jsaction="click:E6Tfl,GFf3ac,tMZCfe; contextmenu:Nqw7Te,QP7LD; mouseout:Nqw7Te; mouseover:E6Tfl,c2aHje" jsname="W297wb">συνειδητοποίησέ το</span>

Έχετε υπόψιν σας πως δουλεύει αυτό; Είναι από δω https://translate.google.gr/?hl=el&sl=auto&tl=el&text=realize%20it&op=translate και στο πεδίο της μετάφρασης στα ελληνικά επιλέγω το κείμενο και κάνω δεξί κλικ και “Προβολή πηγαίου κώδικα επιλογής”.
Καλά μέχρι εδώ.
Αυτό που με παραξενεύει είναι ότι στον κώδικα όλης της σελίδας view-source:https://translate.google.gr/?hl=el&sl=auto&tl=el&text=realize%20it&op=translate (που κάνεις δεξί κλικ για μενού, όπου ναναι στη σελίδα και στο λέει “Προβολή πηγαίου κώδικα σελίδας”),
δεν υπάρχει αυτή η γραμμή μέσα. Ούτε καν η μεταφρασμένη λέξη στα ελληνικά. Γιατί αυτό;

Το view source όλης της σελίδας δείχνει το κώδικα που λαμβάνεται. Όταν κοιτάς το κώδικα επιλογής κοιτάς το κώδικα εκείνη τι στιγμή (σε web dev lingo, το DOM). Ένα καλό παράδειγμα που γίνεται εμφανής η διαφορά είναι η σελίδα https://rhodey.org/ (όπως και το φόρουμ που είμαστε). Βασικά ο αρχικός ληφθέντας κώδικας τροποποιείται κάθε στιγμή με το JS κώδικα που φορτώνεται χρησιμοποιώντας το κείμενο που εισάγεται στο πεδίο (2-way data binding).

To js είναι η δεύτερη φορά που βλέπω αναφορά σε αυτό μέσα σε λίγες μέρες. Με προέτρεψε ο Asfodelus να το μελετήσω. Έχει να κάνει με αυτά τα αρχεία που βλέπουμε παν τού με κατάληξη json;
Αν μου πεις ότι υπάρχει τρόπος να παίρνουμε τον κώδικα αυτόν που φορτώνεται με εντολή τερματικού, το μελετάω με τη μία άμεσα. :grinning:

Θέλω να ολοκληρώσω αυτό το script μωρέ και έψαχνα τρόπο να την έξοδό τους (αυτούς εκεί του γκουγκλς) και να την βγάλω σε παραθυράκι ειδοποίησης.

#!/bin/sh
while engl=$(zenity --entry --text="Κείμενο προς μετάφραση")

do

encoded_txt=$(echo -n "$@" | perl -pe's/([^-_.~A-Za-z0-9])/sprintf("%%%02X", ord($1))/seg');
url="https://translate.google.gr/?hl=el&sl=auto&tl=el&text=$engl&op=translate"

firefox "$url"
done

Τα στοιχεία που φτιάχνουν μια ιστοσελίδα είναι 3 γλώσσες:

  • HTML (hypertext markup language) για τα κείμενα, μια γλώσσα περιγραφής.
  • CSS (Cascading stylesheets) μια γλώσσα περιγραφής που προσδιορίζει γραμματοσειρές χρώματα κλπ
  • Javascript μια γλώσσα προγραμματισμού που πειράζει τα παραπάνω και κάνει μια σελίδα δυναμική

Υπάρχουν και επιπλέον πράγματα όπως εικόνες, βίντεο και γραμματοσειρές που όλα αυτά μαζί φτιάχνουν αυτό που βλέπεις. Τα παραπάνω τα λέμε frond-end (ας το μεταφράσουμε σαν τη βιτρίνα).

Αλλά μια σελίδα σαν το παρόν φόρουμ έχει τις σελίδες να παράγονται δυναμικά αντλώντας πληροφορίες από μια βάση δεδομένων. Αυτό τρέχει στον server και μπορεί να είναι γραμμένο σε οποιαδήποτε γλώσσα προγραμματισμού (Ruby όπως το παρόν, Python, PHP μια ειδική γλώσσα για αυτή τη δουλεία, ή ακόμα και η Javascript - παρατσούκλι node.js). Τα παραπάνω τα λέμε back-end. Συνήθως έχεις άλλους προγραμματιστές ειδικευμένους για αυτή τη δουλεία, ενώ για τη βιτρίνα έχεις προγραμματιστές και γραφίστες.

Η τελευταία τάση είναι να παράγεις τη σελίδα όλη στον σερβερ, είναι να μεταφέρεις την περισσότερη δουλεία στον υπολογιστή σου. Ο σερβερ θα παράγει αρχεία JSON (Javascript Object Notation) και κώδικας Javascript που τρέχει στον browser σου θα συναρμολογήσει αυτό που βλέπεις. Αυτό μας επιτρέπει να κρατάμε το κόστος τόσο χαμηλό.

Τα παραπάνω είναι προφανώς μια απλοποιημένη εικόνα

2 «Μου αρέσει»

Πολύ διαφωτιστικά. Ευχαριστώ για τον κόπο… και τον τρόπο. Πολύ εύπεπτο και χρήσιμο.

1 «Μου αρέσει»