Μια εισαγωγή στην ανάπτυξη ιστοσελίδων

Πίσω στην ημέρα μου (Καλά, πριν από την ημέρα μου), το επάγγελμα του προγραμματιστή ήταν ένα χαμηλό ενός. Είναι κατατάσσεται κάτω από το κουτάβι μισητής αλλά πάνω απ 'Yankees ανεμιστήρα στην κλίμακα των επαγγελματικών τιμή. Εξαιτίας όλων των ετικετών και τις εικόνες διαφάνεια spacer χρησιμοποιήσαμε, είχαμε δει ως ακατέργαστο χάκερ χωρίς καμία αίσθηση της αισθητικής.

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

Συντροφιά μας εργαλείων στο τέλος του browser μας επέτρεψαν να δημιουργήσουμε πράγματα στο διαδίκτυο που ήταν αδιανόητες μόλις 10 χρόνια, όπως αμέτρητα κοινωνικά δίκτυα που ισχυρίζονται ότι είναι ο καλύτερος τρόπος για να σπαταλάτε το χρόνο σας, “καυτό” tech ξεκινήματα που ισχυρίζονται ότι έχουν ξεσηκώσει κάτι που ήδη έχει γίνει χιλιάδες φορές, και Angry Birds κλώνοι που ισχυρίζονται ότι είναι μόνο ελαφρώς χειρότερη από ό, τι το αρχικό. Όλα στο διαδίκτυο. Έτσι, ίσως αυτά τα εργαλεία δεν έχουν πάει στο μεγαλύτερο χρήσεων.

Έτσι, ποια είναι αυτά τα καταπληκτικά εργαλεία που έχω μιλήσει για? Ανοίγοντας το δρόμο ήταν η (ειλικρινά καταπληκτικό) γλώσσες που ονομάζεται HTML5, CSS3, και JavaScript, την οποία είχα ψευδώνυμο του 3 ιππείς της webocalypse. Εδώ είναι μια ματιά σε κάθε ένα:

HTML

HTML (σωστά είναι γνωστή ως HyperText Markup Language; μπορείτε να δείτε γιατί οι άνθρωποι που δεν θέλουν να κοιτάξουμε κακό απλά χρησιμοποιήστε το αρκτικόλεξο) είναι η γλώσσα που χρησιμοποιείται για τη διάταξη σελίδων web. Κάντε δεξί κλικ σε αυτή τη σελίδα και κάντε κλικ “View Source”. Αυτό είναι το HTML ότι αυτή η σελίδα χρησιμοποιεί.

Ουσιαστικά, HTML είναι ένα μάτσο tags, που το πρόγραμμα περιήγησης ερμηνεύει και καθορίζει. Για παράδειγμα, ματιά σε αυτό το κώδικα HTML:

<p>Δεν ξέρω για σας, αλλά μου αρέσει το πάτημα κουμπιών.</p>

<br>

<κουμπί>Κάντε κλικ στην επιλογή μου!</κουμπί>

Αυτός ο κώδικας HTML έχει το κείμενο τυλιγμένο σε μια παράγραφο (ο <p> tag ξεκινά μια παράγραφο, ο </p> tag τελειώνει μια παράγραφο.) Υπάρχει μια αλλαγή γραμμής (ο <br>) και στη συνέχεια ένα κουμπί, μπορείτε να κάνετε κλικ στην περιεκτικότητα σε καρδιά σας. Ο περιηγητής σας θα το βάλω έξω στην οθόνη σας.

Έτσι ώστε να είναι όλα ωραία και καλά. Αλλά αν δεν έχετε τίποτα, αλλά HTML, you get a webpage that looks like it came straight out of the 1990’s. Όχι πολύ καλό βγήκε από εκείνη την δεκαετία ούτως ή άλλως (χτενίσματα, μουσική, κλπ.) Αλλά περιμένετε! Υπάρχει περισσότερο!

CSS

Ένα άλλο αρκτικόλεξο. Καλοκαίρι. CSS σημαίνει Τα επικαλυπτόμενα φύλλα στυλ, το οποίο είναι ένα κομμάτι από ένα ακυριολεξία δεδομένου ότι πραγματικά δεν καταρράκτη (ό, τι αυτό μέσα… Είναι κώδικα υπολογιστή, δεν είναι ένα καταρράκτη!) CSS είναι η γλώσσα που χρησιμοποιείται στις ιστοσελίδες στυλ. Αυτό, πολύ, ερμηνεύεται από τον browser σας.

CSS και HTML συνεργάζονται – HTML καθιστά τη διάταξη της σελίδας, CSS δίνει ταλέντο του. Φανταστείτε το χτίσιμο ενός σπιτιού: HTML παρέχει το μονότονο αλλά αναγκαία ξύλινο πλαίσιο, CSS προσθέτει τα χρώματα νέον και ιδιόμορφη έπιπλα.

CSS είναι μια αρκετά απλή γλώσσα: για μια ορισμένη ετικέτα HTML (σαν μια παράγραφο), μπορείτε να καθορίσετε τιμές για τις κατηγορίες των διαφόρων στυλ. Ο περιηγητής σας θα διαβάσει το CSS και να εφαρμοστεί σε όλες τις ετικέτες που ταιριάζουν HTML. Για παράδειγμα:

p {

χρώμα: κόκκινος;

font-size: 16px;

}

Έτσι, σε κάθε παράγραφο (πράγματα στο HTML <p> tags) θα έχουν κόκκινος γραμματοσειρά και να είναι 16 pixels σε μέγεθος. Αν παρατηρήσει, αυτά είναι μερικά από τα ίδια στυλ που μπορείτε να χρησιμοποιήσετε στο Microsoft Word και άλλες εφαρμογές.

Έτσι τώρα οι ιστοσελίδες σας που έξω και να φαίνονται αρκετά. Αλλά εδώ είναι το πράγμα: αυτό είναι το μόνο που κάνουν. Απλώς κάθεται εκεί και να δούμε αρκετά. Ποια είναι μεγάλη και όλοι, αλλά οι χρήστες του διαδικτύου θέλουν περισσότερο. Θέλουν φανταχτερό κινούμενα σχέδια. Θέλουν pop-ups (Καλά, ίσως έκαναν πίσω 2002, αλλά εγώ παρεκκλίνω.) Θέλουν τα κουμπιά που θα κάνει τα πράγματα όταν κάνετε κλικ πάνω τους.

Σχετικά με αυτό το τελευταίο – αυτό είναι ένα θέμα. Μπορείτε να πραγματοποιήσετε μια <κουμπί> σε μορφή HTML, και μπορείτε να κάνετε κλικ όλη την εβδομάδα, αλλά δεν κάνει τίποτα οποιαδήποτε στιγμή σύντομα. Εάν θέλετε το κουμπί για να, oh Δεν ξέρω, μετακινήσετε ελέφαντα σας πάνω στην οθόνη και να επιτεθούν κάτι, τότε θα πρέπει να έχετε κάτι περισσότερο.

JavaScript

JavaScript είναι δεν ένα αρκτικόλεξο, αν ήσασταν αναρωτιούνται. Κάλεσαν το JavaScript γιατί έμοιαζε γλώσσα προγραμματισμού Java, το οποίο είναι περίεργο αιτία δεν. Οπωσδήποτε, JavaScript είναι μια κατάλληλη γλώσσα προγραμματισμού που προκαλεί όλες τις δυναμικές επιδράσεις βλέπετε στο διαδίκτυο.

Όπως κάθε γλώσσα προγραμματισμού, JavaScript είναι μια σειρά από εντολές που κάνουν μεταβλητές και να χρησιμοποιήσετε τις λειτουργίες. Το δροσερό μέρος για JavaScript (καλά, τόσο δροσερό όπως μια γλώσσα προγραμματισμού μπορεί να είναι) είναι ότι μπορείτε να αποκτήσετε πρόσβαση σε αυτά τα στοιχεία HTML (όπως τις σκέψεις και τα κουμπιά) και στυλ CSS (όπως το χρώμα και το μέγεθος της γραμματοσειράς) και την αλλαγή. Κοιτάξτε αυτόν τον κωδικό:

παράγραφο μπορεί να = $('P');

paragraph.css(«Χρώμα»,«Μπλε»);

Αυτός ο κώδικας JavaScript θα βρείτε όλες τις παραγράφους στη σελίδα – ο $ σημάδι λέει το πρόγραμμα περιήγησης για να βρείτε όλα τα στοιχεία που ταιριάζουν, και το «π’ σημαίνει ότι πρέπει να επιλέξει τις παραγράφους (θυμηθείτε την <p> στοιχείο από την HTML?) Στη συνέχεια, μπορείτε να αποθηκεύσετε τις σκέψεις σε μια μεταβλητή, και η εντολή το πρόγραμμα περιήγησης για να αλλάξει το χρώμα των CSS στυλ τους μπλε.

Αυτό που βρίσκω ενδιαφέρον (πάλι, αυτό είναι όλα από την οπτική γωνία ενός “webdev”) είναι το πόσο κομψά οι τρεις γλώσσες συνεργαστούν. Η τελευταία γραμμή της JavaScript συνδυάστηκαν με HTML της σελίδας και το CSS που χρησιμοποιείται για το στυλ. Δεν είναι όπως αυτές οι γλώσσες είναι απλά διαφορετικές συνιστώσες του ίδιου πράγματος – ότι είναι ένα και το αυτό, διαφορετικές πλευρές του ίδιου καταπληκτικό μηχάνημα.

Ήχος συναρπαστικό? Νομίζω ότι δεν. Αυτό είναι μόνο ένα μέρος της ομορφιάς του web.