[Powered by Google Translate] [Σεμινάριο] [Προετοιμασία του δικτυακού σας τόπου για το Web]
[Yuechen Zhao] [Πανεπιστήμιο του Χάρβαρντ]
[Αυτό είναι CS50.] [CS50.TV]
>> Εντάξει. Εδώ είναι μια άλλη ώρα της ανάπτυξης ιστοσελίδων, αν εσείς είστε επάνω για αυτό.
Σήμερα Πάω να μιλάμε για την προετοιμασία ιστοσελίδα σας για το Web.
Όλη την ημέρα - και κατά πάσα πιθανότητα για τις τελευταίες 2 εβδομάδες -
έχουμε μιλήσει για το πώς να δημιουργήσετε ένα δικτυακό τόπο,
Πώς να χρησιμοποιήσετε HTML, πώς να χρησιμοποιούν PHP, πώς να χρησιμοποιείτε πλαίσια,
Πώς να βεβαιωθείτε ότι μπορείτε να αλληλεπιδρούν με τη βάση δεδομένων - τέτοια πράγματα.
Αλλά σήμερα, θα πάμε να μιλάμε για το πού το site σας πρόκειται να ζήσουν μετά CS50.
Επειδή μετά από όλα, CS50 δεν συμβαίνει περασμένο Δεκέμβριο.
Εμείς πάμε να μιλάμε για ονόματα τομέα, φιλοξενίας.
Εμείς πάμε να μιλάμε για το τι συμβατότητα cross-browser
και cross-platform συμβατότητα είναι, και πώς μπορείτε να βεβαιωθείτε ότι η ιστοσελίδα σας
πρόκειται να λειτουργήσει κάτω από όλες τις συνθήκες.
Θα μιλήσουμε για το χειρισμό σφαλμάτων και άλλες μαγικές διακομιστή.
Μιλάμε για τη βελτιστοποίηση της απόδοσης, βελτιστοποίηση μηχανών αναζήτησης,
και πώς να πάρει τους ανθρώπους για να επισκεφτείτε στην πραγματικότητα σας ιστοσελίδες.
Και τέλος, μόλις μερικές καλές πόρους για να βεβαιωθείτε ότι τα παιδιά σας έχουν αρκετά από αυτά
να πάει μακριά με το τελικό σχέδιο σας, και ελπίζω μετά.
>> Το πρώτο πράγμα που θα πάμε να μιλήσουμε για ονόματα τομέα.
Αυτή τη στιγμή είστε προγραμματισμό σε συσκευή σας, θα πάμε σε ένα τοπικό κεντρικό υπολογιστή
η οποία δεν είναι στην πραγματικότητα ένα όνομα τομέα.
Αυτό είναι το είδος του απλά ένα ψευδώνυμο ή ένα ψευδώνυμο για την πραγματική εγκατάσταση του Linux σας
εσωτερικό είτε VMware σε έναν παίκτη Mac ή το VMware σε έναν υπολογιστή.
Τα ονόματα τομέα που σας επιτρέπει να θέσει μια τοποθεσία πάνω στο Web και στη συνέχεια να πάμε σε κάτι σαν
www.google.com και να πάρει την ιστοσελίδα.
Πώς λειτουργούν;
Ας πούμε ότι είστε απλώς ένα μέσο του web server -
μέσος χρήστης του διαδικτύου και έχετε ένα φορητό υπολογιστή, και να πάτε να www.howstuffworks.com.
Μπορείτε ίσως να δούμε πού θα έκλεψε από αυτό.
Πώς λειτουργεί πράγματα - ο υπολογιστής σας θα σας ζητήσει στη συνέχεια ένα τοπικό DNS server,
«Ξέρετε πού αυτή την ιστοσελίδα είναι;"
"Ξέρετε τη διεύθυνση IP του www.howstuffworks.com;"
DNS server σας θα μπορούσε να πει, "Ναι, το ξέρω."
Σε αυτή την περίπτωση, μπορείτε να πάρετε τη διεύθυνση IP, καθώς και πρόσβαση στον υπολογιστή σας ότι η IP διεύθυνση.
Αν δεν το κάνει, ζητά από άλλο διακομιστή DNS, "Hey! Ξέρετε τι www.howstuffworks.com είναι;"
Ότι ο διακομιστής θα μπορούσε να πει, "Ναι, το ξέρω."
Έτσι, λέει ο άλλος τι είναι, και, τέλος, ότι οι πληροφορίες που παίρνει πέρασε στον υπολογιστή σας,
και μπορείτε να έχετε πρόσβαση howstuffworks.com.
>> Πώς μπορείτε να πάρετε ένα από αυτά τα μαγικά πράγματα;
Πώς μπορείτε να πάρετε ίσως www.yourname.com ή www.ilovecats.com;
Μπορείτε να εγγραφείτε για ένα,
και υπάρχουν πολλές ιστοσελίδες εκεί έξω που σας επιτρέπουν να το πράξει.
Θα πρέπει - στις περισσότερες περιπτώσεις θα πρέπει να πληρώσει γι 'αυτές.
Υπάρχουν ορισμένα ονόματα τομέα που είναι δωρεάν.
Αν πάτε σε www.co.cc ή. Tkdomainnames, αυτά είναι δωρεάν.
Αλλά, αυτοί έρχονται με ορισμένους περιορισμούς, και μάλιστα κάποια από αυτά δεν θα μπορούσε μάλιστα να
πραγματικό, top-level domain names όπως. com ή. net.
Κανονικά θα ήθελα να προτείνω πρόκειται για έναν από τους
επειδή οι χρήστες είναι απλά πιο άνετα με αυτές.
Έχετε δει πολλά. Coms. Έχετε δει πολλά. Δίχτυα.
Πιθανότατα δεν έχουν δει πολλά. Co.cc 's, έτσι είναι δύσκολο να θυμόμαστε.
Διαφορετικές ιστοσελίδες όπως GoDaddy ή NameCheap ή - Θα χρησιμοποιηθεί ένα που είναι
είδος σχηματικό - που ονομάζεται activedomain.com.
Φαίνεται πολύ σχηματικό, αλλά λειτούργησε πολύ καλά για μένα.
>> Και τέλος, έχετε άλλους που κάνουν ίσως και περισσότερο διαφήμισης, όπως η Network Solutions.
Αλλά αν πάτε σε NetworkSolutions.com και να δούμε τις τιμές τους
είναι πολύ ακριβό. Κοιτούσα τους χθες το βράδυ.
Για ένα χρόνο ενός domain name, είναι πιθανόν να μην αξίζει πολλά χρήματα.
Στην πραγματικότητα, εάν παίρνετε ένα. Com ή. Org ή. Net
η συνήθης τιμή είναι περίπου $ 10 το χρόνο.
Έτσι, εάν είστε πληρώνουν πολύ περισσότερο από αυτό, είναι πιθανόν να μην είναι αξίζει τον κόπο
γιατί, μετά από όλα, αυτές οι ιστοσελίδες δεν κάνουν τίποτα με αυτό το όνομα τομέα.
Το δίνουν μόνο σε εσάς, και έτσι αν μπορείτε να το πάρετε για φθηνά, γιατί όχι;
>> Το άλλο πράγμα είναι, αφού έχετε το όνομα περιοχών σας, τότε ίσως θέλετε να
πάει για να είτε Godaddy.com ή όπου έχετε αγοράσει το όνομα τομέα σας
και να ρυθμίσει τους διακομιστές ονομάτων για το όνομα τομέα.
Τι σημαίνει αυτό είναι μόλις ένας χρήστης πηγαίνει στο www.howstuffworks.com,
οι διευθύνσεις IP όνομα του διακομιστή είναι οι IP διευθύνσεις που θα είναι σε θέση να κοιτάζω προς τα πάνω.
Θα είναι σε θέση να έχουν πρόσβαση την ιστοσελίδα σας μέσω αυτών των εξυπηρετητών ονομάτων.
Αν ισχύουν για τη φιλοξενία κάπου
τότε ο υπολογιστής σας θα πιο πιθανό να σας δώσει τους διακομιστές ονομάτων για χρήση.
>> Και τέλος, υπάρχει αυτό το πράγμα που ονομάζεται WHOIS.
Μια βάση δεδομένων WHOIS είναι μια βάση δεδομένων με την οποία θα μπορούσατε να εισάγετε ένα όνομα τομέα
και θα φτύσει κάποιες πληροφορίες σχετικά με τον ιδιοκτήτη του εν λόγω χώρου και άλλα στοιχεία επικοινωνίας.
Τώρα, θα μου πείτε, "Δεν θέλω πραγματικά τη διεύθυνση του σπιτιού μου ή δεν θέλω πραγματικά να την ηλεκτρονική μου διεύθυνση
στην ιστοσελίδα της για να δει κανείς ή στο διαδίκτυο για να το δουν όλοι. "
Στη συνέχεια, ίσως να θέλετε να χρησιμοποιήσετε κάτι που πολλές υπηρεσίες φιλοξενίας παρέχουν -
σαν διαχειριστής WHOIS.
Ένας διευθυντής WHOIS είναι απλά μια άλλη υπηρεσία που πολλοί από αυτούς προβλέπουν ότι
δορές μακριά ότι οι πληροφορίες και μόνο βάζει το ποιος είναι υπεύθυνος για το όνομα -
για τη διεύθυνση είναι συνήθως μόνο ότι το όνομα της εταιρείας που είναι σας έδωσε αυτό το όνομα τομέα -
και έτσι τότε τα προσωπικά σας στοιχεία δεν είναι να διαρρεύσει στο Internet,
η οποία είναι συνήθως αρκετά καλό.
Εγώ ο ίδιος να χρησιμοποιήσετε μία από αυτές τις υπηρεσίες.
Αν δεν νοιάζονται για το δικό προστασία της ιδιωτικής ζωής σας, τότε δεν πειράζει πραγματικά.
>> Ένας διακομιστής DNS σημαίνει Συστήματος Ονομάτων Τομέα, και αυτό που είναι -
Είναι το είδος του σαν ένα hash κάπου πίνακα που λέει,
"Η διεύθυνση της ιστοσελίδας πρόκειται να χάρτη σε αυτή τη διεύθυνση IP." Και αυτό είναι όλο.
Έτσι, τη στιγμή που το ερώτημα αυτό το διακομιστή DNS, τότε μπορείτε να πάρετε τις διευθύνσεις IP
για το αντίστοιχο όνομα τομέα και στη συνέχεια επισκεφθείτε το δικτυακό τόπο.
(Μέλος του ακροατηρίου μια ερώτηση - δεν ακούγεται)
Το πρώτο; Το πρώτο επίπεδο είναι στην πραγματικότητα συνήθως μόνο cache του υπολογιστή σας το ίδιο.
Ταξινόμηση υπολογιστή σας θυμάται την τελευταία φορά που πήγατε στο www.google.com
ήταν σε αυτή τη διεύθυνση IP, και στη συνέχεια, μετά από λίγο, ότι η μνήμη cache θα λήξει,
και θα ζητήσει όπως η Comcast DNS,
"Γεια σου, τι είναι www.google.com;"
Κανονικά, όταν αγοράζετε ένα domain name και την εγγραφή σας ένα, και έχετε δημιουργήσει μια ιστοσελίδα,
δεν μπορείτε να πάτε στην εν λόγω ιστοσελίδα αμέσως με αυτό το όνομα τομέα, επειδή το όνομα servers
σε όλη την υδρόγειο Δεν ξέρω για σας domain name ακόμα. Θα πρέπει να συμπληρώσετε.
Είναι συνήθως διαρκεί περίπου 24-48 ώρες.
Εντάξει. Έτσι, αυτό είναι λίγο για τα ονόματα τομέα. Είναι πολύ δροσερό.
Νομίζω ότι πρέπει να πάρουν ένα, εάν είστε σοβαροί σχετικά με το έργο
και αν πραγματικά θέλετε να κάνετε το έργο σας είναι γνωστό σε όλη την πανεπιστημιούπολη,
έχοντας ένα όνομα τομέα το κάνει να μοιάζει πραγματικά επαγγελματική.
>> Στη συνέχεια, το επόμενο βήμα, φυσικά, είναι να έχουν κάποιο είδος της φιλοξενίας.
Αν φιλοξενήσει ακριβώς στον υπολογιστή σας, κανείς δεν πρόκειται ποτέ να είναι σε θέση να πάει σε αυτό.
Θα μπορούσε ενδεχομένως να δημιουργήσει ένα διακομιστή στον υπολογιστή σας και να κρατήσει τον υπολογιστή σας για πάντα,
αλλά αυτό δεν συνιστάται.
Υπάρχουν διάφορα είδη που φιλοξενεί είναι διαθέσιμες ηλεκτρονικά.
Υπάρχει shared hosting. Υπάρχει VPN (ακατάληπτο) που είναι virtual hosts.
Υπάρχει ημι-αφιερωμένη και αφιερωμένο.
Από την τελευταία 3, VPN, semi-dedicated, και αφοσιωμένο είναι συνήθως πιο ακριβά.
Είναι συνήθως χρησιμοποιείται για δικτυακούς τόπους που απαιτούν περισσότερους πόρους.
Αν είστε λίγο ξεκινάμε με ένα δικτυακό τόπο,
θα μπορούσε απλώς να είναι πιο οικονομικό να πάει με το shared hosting.
Και τι κοινά μέσα είναι απλώς ένα μάτσο των δικτυακών τόπων είναι όλοι μαζί
ταξινομήσετε του σε ένα διακομιστή σε αυτή την ιστοσελίδα για το κεντρικό διακομιστή, και μπορείτε να έχετε πρόσβαση στην ιστοσελίδα σας
μέσω του domain name.
>> Υπάρχουν πολλά δημοφιλή φιλοξενεί εκεί έξω.
HostGator και DreamHost - αυτά είναι πολύ, πολύ μεγάλο και πολύ, πολύ δημοφιλής
και πολύ, πολύ επιτυχημένη.
Χρησιμοποιώ προσωπικά αυτό που ονομάζεται MDDHosting.
Αν πάτε στο www.mddhosting.com, αυτό είναι υποδοχής της επιλογής μου.
Νομίζω ότι είναι πολύ καλό.
Θα έχουμε πάντα πολύ αξιόπιστο, και δεν είχα ποτέ κανένα πρόβλημα με αυτούς.
Έχουν επίσης πολύ ανταγωνιστικές τιμές.
Δύο που δεν αρέσει είναι GoDaddy - αυτό είναι επίσης ένα πολύ δημοφιλές υποδοχής,
αλλά είχα τρομερές εμπειρίες μαζί τους,
και πολλοί άνθρωποι που γνωρίζω ότι είχαν πραγματικά τρομερές εμπειρίες μαζί τους.
Θα είδος πάει μετά από τους ανθρώπους που δεν ξέρουν τι κάνουν -
ίσως θέλετε να κάνετε μια ιστοσελίδα για πρώτη φορά,
και έτσι το είδος τους con να αγοράζουν το πακέτο φιλοξενίας τους.
Μην το να το κάνει. Μην πέσετε για αυτό. Πηγαίνετε ματιά για άλλα πακέτα φιλοξενίας που ταιριάζει πραγματικά στις ανάγκες σας.
Και το άλλο είναι - υπάρχουν δωρεάν οικοδεσπότες εκεί έξω.
Υπάρχουν ιστοσελίδες που θα φιλοξενήσει την ιστοσελίδα σας δωρεάν -
Μερικές φορές βάζοντας μια αγγελία στον ιστότοπό σας,
μερικές φορές με κάνει να συμμετέχουν σε φόρουμ τους,
αλλά μερικές φορές απλά και δωρεάν.
Αλλά, να είστε προσεκτικοί με δωρεάν οικοδεσπότες, επειδή πολλά από αυτά πραγματικά πήγαινε έξω από τις επιχειρήσεις
μετά από μερικούς μήνες. Απλά δεν μπορεί να συμβαδίσει με τις δαπάνες.
Άλλοι είναι απλά πολύ αναξιόπιστα, και η ιστοσελίδα σας θα είναι πάντα κάτω,
και δεν θέλετε να συμβεί αυτό.
>> Κάθε φορέας υποδοχής θα προσφέρει το δικό του πίνακα ελέγχου τους.
Σημειώστε ότι για τη συσκευή σας, πραγματικά δεν υπάρχει ένας πίνακας ελέγχου per se.
Θα πρέπει να χρησιμοποιήσετε το τερματικό για να πάει και να επεξεργαστείτε τα αρχεία.
Θα πρέπει να chmod πράγματα από τον εαυτό σας.
Αν ήθελε να πάει στο phpMyAdmin,
θα πρέπει να πάτε στο @ localhost / phpmyadmin και τέτοια πράγματα.
Αλλά με έναν πίνακα ελέγχου, μπορείτε να πάτε και να επεξεργαστείτε τα αρχεία στον server σας
με την Εξερεύνηση των Windows ή έναν ανιχνευτή τύπου εφαρμογή.
Ή μπορείτε να πάτε μέσα και να δούμε τις βάσεις δεδομένων σας με το δικό τους εργαλείο
αντί του phpMyAdmin.
Έτσι, υπάρχει μια μεγάλη επιλογή εδώ, και μερικές από τις πιο δημοφιλείς πίνακες ελέγχου είναι μέχρι εκεί.
Αλλά αν ψάχνετε για έναν κεντρικό υπολογιστή,
τότε ίσως να θέλετε να εξετάσει τι είδους προσαρμογές και επιλογές
μου προσφέρουν για να προσαρμόσετε server μου και να κάνω ιστοσελίδα μου λειτουργεί καλύτερα.
Έτσι, στη συνέχεια, μπορείτε να ρωτήσετε, "Λοιπόν, πώς μπορώ να επιλέξω τη φιλοξενία;"
Αν πάτε σε οποιοδήποτε δικτυακό τόπο υποδοχής υπάρχει πολλή ορολογία, και υπάρχουν πολλές επιλογές.
Υπάρχουν πολλές διαφορετικές τιμές επίσης.
Κανονικά θα πάω για τα φθηνότερα αυτά μόνο και μόνο επειδή ιστοσελίδες που ίσως και να κάνω -
και ειδικά τώρα, ειδικά ως ορεκτικά - μπορεί να μη χρειάζονται πολλοί πόροι
όπως μπορεί μια ιστοσελίδα όπως Microsoft.com.
>> Πρώτα θέλετε να εξετάσουμε το λειτουργικό σύστημα, εάν είστε πραγματικά περίεργος αν
το site σας πρόκειται να φιλοξενείται σε Linux, σε Windows ή σε Mac.
Κανονικά θα πήγαινε με το Linux, επειδή αυτό είναι συνήθως η φθηνότερη,
και επίσης αυτό που ίσως εσείς είστε πιο εξοικειωμένοι με το γιατί της συσκευής.
Και τότε, ίσως θα θέσει περιορισμούς σχετικά με το ποσό του εύρους ζώνης που μπορείτε να πάρετε -
όπως πόσα megabytes ή gigabytes δεδομένων οι χρήστες μπορούν να κατεβάσετε
από την ιστοσελίδα σας κάθε μήνα; Ή χώρο στο δίσκο.
Πόσο χώρο έχετε; Είναι 500 MB; Είναι 2 GB; Είναι απεριόριστο;
Σήμερα, πολλοί από τους διακομιστές web για να έχετε απεριόριστο χώρο στο δίσκο ως ένας τρόπος για τους
για να σας δελεάσει να πάρει πακέτο φιλοξενίας τους.
Αλλά αν πραγματικά το σκέφτομαι, όταν θα πρόκειται ποτέ να χρειάζονται απεριόριστο χώρο στο δίσκο;
Αν έχετε ένα ζευγάρι των αρχείων HTML, ένα ζευγάρι της PHP, ένα ζευγάρι των εικόνων -
αυτό είναι μόνο ένα ζευγάρι των megabytes, και ούτω
συνήθως εγώ απλά να πάτε για αξίζει ίσως μερικά gigabytes »του χώρου,
και ότι μπορεί να είναι αρκετό για να με ξεκινήσει μέχρι να χρειάζονται περισσότερο.
>> Τέλος, μπορεί να θέσει περιορισμούς σχετικά με το τι είδος του - πόσες βάσεις δεδομένων που μπορείτε να έχετε.
Ίσως μπορείτε να έχετε μόνο 1 βάση δεδομένων. Ίσως μπορείτε να έχετε 2. Ίσως μπορείτε να έχετε 10.
Είναι πραγματικά σημαντικό για εσάς πόσα θα πάρετε;
Πράγματα που πρέπει να ρωτήσετε τον εαυτό σας.
Και τελικά, απλά πράγματα όπως γλώσσες.
Να υποστηρίζουν PHP; Να υποστηρίξει MySQL;
Οι περισσότερες ιστοσελίδες που φιλοξενεί δεν υποστηρίζουν αυτά, επειδή είναι δωρεάν. Είναι open source.
Δεν τους κόστιζε τίποτα να προσφέρει αυτά για εσάς.
Αλλά αν θέλετε να χρησιμοποιήσετε, ας πούμε, Ruby ή Python ή κάποια από αυτές τις άλλες γλώσσες -
δεν μπορεί να την υποστηρίξει στον server τους, γι 'αυτό είναι σημαντικό να ψάξουν για αυτά τα είδη των πραγμάτων.
>> Και τέλος, δεν σας επιτρέπουν να κάνετε κάποια πιο προχωρημένα πράγματα, όπως SSL ή cron θέσεις εργασίας;
SSL είναι μια επιλογή όπου μπορείτε να κάνετε την ιστοσελίδα σας πιο ασφαλή, καθιστώντας HTTPS
και να κρυπτογραφήσετε τις συνδέσεις σας.
Και cron θέσεις εργασίας είναι απλά ίσως scripts που θέλετε να εκτελέσετε
κάθε 5 λεπτά, κάθε 10 λεπτά, κάθε 15.
Πολλές κοινές φιλοξενία ιστοσελίδων βάζουν περιορισμούς
σχετικά με τον αριθμό των θέσεων εργασίας cron που μπορείτε να εκτελέσετε γιατί αυτό καταλαμβάνει περισσότερους πόρους.
>> Και τέλος, ακριβώς ό, τι άλλο θέλετε να δείτε - βεβαιωθείτε τι ακριβώς συμβαίνει
προτού να αγοράσετε το πακέτο φιλοξενίας σας.
Και τέλος, οι επιδόσεις. Η απόδοση είναι τεράστια.
Πόσο γρήγορα είναι η ιστοσελίδα μου πρόκειται να τρέξει;
Οι περισσότεροι χρήστες δεν πρόκειται να περιμένει για ακόμη δευτερόλεπτα για την ιστοσελίδα σας για να τρέξει
πριν απλά βαριούνται, και πήγαινε για να MeanBase και να αρχίσετε να ψάχνετε σε φωτογραφίες
των γατών - ξέρετε ότι θα συμβεί, και θέλετε να βεβαιωθείτε ότι μπορείτε να πάρετε αυτόν τον χρήστη επί του σκάφους
και ότι έχετε καλή uptime που σημαίνει απλώς ότι
ιστοσελίδα σας πρόκειται να είναι προσβάσιμο ανά πάσα στιγμή.
Πολλοί οικοδεσπότες έχουν πραγματικά κακή uptime και αυτό σημαίνει απλά την ιστοσελίδα σας δεν πρόκειται να είναι
προσβάσιμες, και δεν θέλετε να συμβεί αυτό, γιατί μπορεί να είναι λυπημένος.
Και μπορείτε επίσης να παρακολουθείτε την απόδοση του κεντρικού σας με ιστοσελίδες όπως το
Pingdom.com ή Host-tracker.com, και να σας πω πόσο συχνά το site σας κάτω.
>> Και τέλος, θέλετε να δείτε για την υποστήριξή τους.
Εάν έχετε ένα πρόβλημα είναι αυτοί πρόκειται να σας απαντήσει μέσα σε 24 ώρες;
Είναι αυτοί πρόκειται να σας απαντήσει μέσα σε 48 ώρες;
Η υπηρεσία φιλοξενίας που χρησιμοποιώ συνήθως ανταποκρίνεται σε μένα μέσα σε λίγα λεπτά
το οποίο είναι πραγματικά ωραίο.
Ουφ! Εντάξει! Ήρθε η ώρα για ένα διάλειμμα. Αλλά εγώ δεν πρόκειται να το δώσει σε εσάς.
Θα εξετάσουμε μόνο τις εικόνες της χαριτωμένα γάτες κάθε τώρα και τότε.
>> Ένα άλλο πραγματικά, πραγματικά μεγάλο πράγμα είναι cross-browser συμβατότητα.
Τι εννοώ με τη συμβατότητα cross-browser;
Ξέρετε, στις μέρες μας δεν είναι μόνο Microsoft Internet Explorer.
Δεν είναι μόνο Mozilla Firefox ή Safari.
Τώρα έχουμε Chrome. Έχουμε Opera. Έχουμε Dolphin. Έχουμε Camino.
Έχουμε Κατακτητή. Έχουμε όλα αυτά τα διαφορετικά προγράμματα περιήγησης.
Πράγματα που βγαίνουν τώρα - Rockmelt - αν και αυτά είναι όλα βασίζονται σε χρώμιο.
Αλλά το γεγονός του θέματος είναι, δεν υπάρχει μόνο ένα πρόγραμμα περιήγησης πια.
Δεν είστε Βλέπετε μόνο αυτές τις σελίδες με μία εφαρμογή.
Και έτσι, διαφορετικούς browsers θα ανταποκριθούν σε διαφορετικές HTML, CSS διαφορετικά, και
διαφορετικές JavaScript διαφορετικά, και πώς να ασχοληθεί με αυτό;
Λοιπόν, σε ορισμένες περιπτώσεις, μπορείτε πραγματικά δεν μπορεί.
Η ιστοσελίδα σας - αν αυτό δουλεύει σε ένα πρόγραμμα περιήγησης, ο κώδικας που έγραψες δεν θα λειτουργήσει
σε άλλο πρόγραμμα περιήγησης, και είναι η εργασία σας για να βεβαιωθείτε ότι ο κώδικας που γράφετε
είναι καθολική, ότι λειτουργεί παντού.
Έτσι, αυτό είναι πραγματικά επικίνδυνο.
Εάν πείτε, "Λοιπόν, αυτό είναι που εργάζονται στον υπολογιστή μου. Great! Ας προχωρήσουμε."
Λοιπόν, είναι κατά πάσα πιθανότητα δεν πρόκειται να λειτουργήσει για τη δική μου, και όταν πάω στην ιστοσελίδα σας
Πάω να είναι πολύ λυπηρό, και πάω να φύγει αμέσως.
Έτσι, ας δούμε πώς μπορείτε να αποτρέψετε αυτό.
>> Το πρώτο πράγμα, βέβαια, είναι να χρησιμοποιήσετε μόνο πρότυπο HTML, CSS και JavaScript.
Τι εννοώ με αυτό;
Λοιπόν, υπάρχουν πολλοί που δεν είναι στάνταρ πράγματα εκεί έξω.
Για παράδειγμα, στο CSS υπάρχουν πολλές εκδοχές.
Εάν δείτε τους κανόνες CSS με-Μοζ-ή-webkit-, οι εν λόγω κανόνες αποτελούν ειδικές
τόσο για τα Mozilla browsers και τα προγράμματα περιήγησης Webkit,
και έτσι θέλετε να βεβαιωθείτε ότι ίσως θέλετε να αποφύγετε αυτά τα πράγματα
γιατί αν χρησιμοποιείτε-Μοζ-ο κανόνας αυτός θα λειτουργήσει μόνο για τον Firefox.
Και αν θέλετε πραγματικά να δείχνουν καλά στον Internet Explorer, επίσης,
θα πάμε να είναι από την τύχη.
Για την HTML, επίσης, θα μπορούσε να κάνει τα πράγματα σε HTML ότι η εργασία σε ένα πρόγραμμα περιήγησης
αλλά ότι οι διακοπές σε ένα άλλο, και θέλετε να αποφευχθεί η όσο το δυνατόν περισσότερο.
Και τέλος, για ακόμη JavaScript - υπάρχουν πολλές εκδοχές της JavaScript,
και αυτό το καλοκαίρι τρέξαμε σε ένα πρόβλημα όπου Document.getElementsByClassName--
η οποία είναι συνήθως μια λειτουργία που έχει προσδιοριστεί ως μέρος της JavaScript προτύπου -
δεν ήταν να βρεθεί στον Internet Explorer 8.
Έτσι, το καλοκαίρι δούλευα σε ένα εργαστήριο και χτίζαμε σε απευθείας σύνδεση πειράματα.
Και σκεφτήκαμε ότι δούλευε πολύ καλά μέχρι να συνειδητοποιήσει χρήστες που χρησιμοποιούσαν
Internet Explorer 8 δεν μπόρεσε να υποβάλει τα αποτελέσματά τους.
Μας λείπει σε πολλά δεδομένα. Αυτό μας έκανε πραγματικά λυπηρό.
Έτσι, μπορείτε πάντα να θέλετε να βεβαιωθείτε ότι τα γραπτά σας πρόκειται να λειτουργήσει παντού.
>> Και τέλος, η χρήση validator.w3.org
το οποίο είναι αυτό που σας λέμε να κάνετε σε PSET 7.
Βεβαιωθείτε ότι οι επικυρωμένες σελίδες σας.
Αυτό είναι σημαντικό, γιατί αυτό είναι τουλάχιστον ένα πρώτο έλεγχο λογική βήμα.
Είναι ο κωδικός μου πραγματικά συμβατή με τα πρότυπα;
Ένας άλλος τρόπος για να ταξινομήσετε του να σας βοηθήσει να βεβαιωθείτε ότι η ιστοσελίδα σας πρόκειται να λειτουργήσει
στις περισσότερες περιπτώσεις είναι να χρησιμοποιήσετε ίσως κάποιες βιβλιοθήκες και τα πλαίσια
επειδή αυτές οι πραγματικά έξυπνο προγραμματιστές έχουν σκεφτεί αυτά τα ζητήματα για σας.
Έχουν περάσει και έχω γράψει διάφορες λειτουργίες που εργάζονται σε όλους τους φυλλομετρητές.
Για παράδειγμα, χρησιμοποιούμε το jQuery στο Pset 7.
Ακόμα κι αν δεν μπορείτε να το έχετε δει, jQuery παρέχει πολλές λειτουργίες
που αλλιώς θα πρέπει να σας γράψω.
Αλλά αυτές οι προγραμματιστές έγραψαν και έκαναν βεβαιωθείτε ότι λειτουργεί σε όλους τους browsers.
Και Bootstrap - που είναι ένα άλλο πλαίσιο CSS που σας δείξαμε στο Pset 7 -
παίρνει πραγματικά μακριά πολύ από τους πονοκεφάλους με το σχεδιασμό ιστοσελίδων που φαίνονται καλά.
σε όλους τους browsers.
>> Και τέλος, αν μπορείτε να το αποφύγετε, εγώ συνήθως αποφεύγεται κωδικοποίησης από το μηδέν.
Εάν μόνο η δημιουργία ενός δικτυακού τόπου για τη λέσχη του σχολείου σας, για παράδειγμα,
και το μόνο που χρειάζεται να κάνετε είναι να εμφανιστεί σε λίγες σελίδες και ίσως να έχει πρόεδρο σας πάει στο
και να αλλάξει μερικά πράγματα εδώ και εκεί - δεν υπάρχει πραγματικά καμία ανάγκη να κώδικα που τον εαυτό σας.
Αυτό παίρνει πολύ χρόνο σας.
Χρειάζεται πολλή ενέργεια σας, και θα πρέπει να περάσουν και θα πρέπει να μάθετε,
καλά, είναι αυτή η μετάβαση να δείχνουν καλά σε αυτό το πρόγραμμα περιήγησης, είναι αυτό πρόκειται να δείχνουν καλά σε αυτό το πρόγραμμα περιήγησης.
Ίσως να χρησιμοποιήσει κάποια από αυτά τα μπαλώματα που άλλοι έχουν ήδη γράψει για εσάς, όπως
WordPress ή Joomla ή Drupal.
Αυτά ονομάζονται περιεχόμενο - αυτά ονομάζονται CMSs που ουσιαστικά είναι μόνο τα πακέτα που
ήδη έρθει γίνει για σας, και μπορείτε να τα κατεβάσετε, βάζουμε επάνω στον κεντρικό υπολογιστή σας,
και να τα προσαρμόσετε όπως θέλετε, και έχετε ήδη μια λειτουργία ιστοσελίδας.
Τα πακέτα κώδικα είναι κάτι για να δούμε, για να.
Αυτά τα πράγματα είναι ανοιχτού κώδικα, εκτός αν πάμε για κάτι τέτοιο -
Αν ψάχνετε για μια μορφή πακέτου, υπάρχουν πράγματα που δεν είναι δωρεάν, όπως
VBulletin ή IP.Board.
Αν δεν χρειάζεστε κάποια από αυτές τις προηγμένες λειτουργίες,
μπορείτε πάντα να επιλέξουν για την ελεύθερη επιλογή.
>> Και τέλος, δεν υπάρχει γλιτώνεις.
Θα πρέπει να ελέγξετε, δοκιμή, δοκιμή.
Θα πρέπει να ελέγξετε τον κωδικό σας σε όλα αυτά τα προγράμματα περιήγησης και σε όλες αυτές τις πλατφόρμες.
Και ξέρετε, IE6 - δόξα τω Θεώ οι άνθρωποι έχουν αρχίσει να κινείται μακριά από IE6
γιατί πίσω στην ημέρα, ίσως και πριν από λίγα χρόνια, web developers έπρεπε να είναι πάντα, πάντα,
πάντα υποθάλψει αδυναμίες IE6 στην τήρηση των προτύπων.
Ιστοσελίδες κοίταξε ακριβώς το είδος του 1990 για την έλλειψη ενός καλύτερου τρόπος για να ασχοληθεί με το θέμα.
Μπορείτε επίσης να χρησιμοποιήσετε screenshots του προγράμματος περιήγησης για να ελέγξετε CSS σας.
Ένα πραγματικά δροσερό ιστοσελίδα είναι browserlab.adobe.com.
Αυτή είναι μια δωρεάν υπηρεσία που τίθεται από την Adobe.
Και αυτό που κάνουν είναι ότι μπορεί να πάρει screenshots της ιστοσελίδας σας
λειτουργεί υπό διαφορετικές συνθήκες - όπως το τρέξιμο κάτω από διαφορετικούς browsers,
λειτουργεί υπό διαφορετικές πλατφόρμες - και να σας δείξω τι μοιάζουν.
Ακριβώς για να σας δείξω τι εννοώ εδώ, έχω δημιουργήσει μια ιστοσελίδα πέρυσι λέγεται ζωή Στο Χάρβαρντ,
και αυτό που προσπάθησα να κάνω - Προσπάθησα να κάνω my.harvard καλύτερα.
Γιατί αν ήταν εδώ πέρυσι, my.harvard δεν φαίνονται όπως φαίνεται τώρα.
Φαίνεται είδος αηδιαστικό.
Αλλά τώρα φαίνεται πολύ καλύτερα.
Εφαρμογή μου δεν ήταν τόσο χρήσιμα πια, αλλά όλοι το ίδιο,
Ξέρετε, εγώ προσπάθησα να προσθέσω - (ακατάληπτο) πολλές οτιδήποτε άλλο -
και φαίνεται - φαίνεται πολύ καλό για τον υπολογιστή μου.
Και τότε, ίσως αν είχα περισσότερο χρόνο θα είχα πάει στο στο εργαστήριο του προγράμματος περιήγησης,
και θα είχα κοίταξε, καλά, πώς σου φαίνεται το Chrome 18 για Windows.
Θα ήθελα να μετακινηθείτε προς τα κάτω και θα δείτε - Ω, όχι! Κοιτάξτε το κουτί ανακοινώσεις.
Το κείμενό μου ξεχείλιζε. Έτσι, αυτό είναι κακό, έτσι δεν είναι;
Αν ένας χρήστης χρησιμοποιεί το Chrome σε Windows και έρχεται στην ιστοσελίδα μου,
που φαίνεται αμέσως πολύ αντιεπαγγελματική.
Έτσι, πρέπει να πάω στο CSS μου και ανακαλύψτε τι μέρος του CSS μου είναι το σπάσιμο εδώ.
Γιατί να μην είναι αυτό που εμφανίζει σωστά και να το διορθώσουμε, έτσι ώστε όλοι οι χρήστες μπορούν να δουν την ίδια ιστοσελίδα
και είναι εξίσου ευτυχής.
>> Και τέλος, καλά, screenshots του προγράμματος περιήγησης είναι ωραία για τον έλεγχο των CSS,
αλλά τι γίνεται με JavaScript σας;
Τι γίνεται αν έχετε κάποια περίπλοκη script που τρέχει;
Λοιπόν, μπορείτε να κάνετε πάντα virtualization.
Αν έχετε ένα Mac, μπορείτε να χρησιμοποιήσετε Bootcamp ή VMWare για την εικονικοποίηση ίσως ένα αντίγραφο του
Τα Windows και η χρήση του Internet Explorer εκεί.
Ή, μπορείτε να πάτε σε κάτι σαν Spoon.net, η οποία, δυστυχώς, λειτουργεί μόνο σε υπολογιστές.
Αλλά αυτό που κάνουν είναι πολύ δροσερό.
Οι λύσεις virtualization λογισμικό για σας ώστε να μπορείτε να εκτελέσετε διαφορετικές εκδόσεις του IE, για παράδειγμα.
Μπορείτε να εκτελέσετε διαφορετικές εκδόσεις του Firefox.
Μπορείτε να εκτελέσετε διαφορετικές εκδόσεις του Safari και να δοκιμάσουν όλες τις ιστοσελίδες σας εκεί.
Δυστυχώς, δεν είναι ελεύθερη.
Αυτή είναι μια υπηρεσία επί πληρωμή, έτσι υπάρχει πάντα είδος αυτό -
υπάρχει πάντα το είδος του εμπορίου αυτού off μεταξύ, καλά, θα πάω να κάνω ιστοσελίδα μου φαίνονται καλά.
Αν ναι, ίσως χρειαστεί να πληρώσουν για κάποιες υπηρεσίες να με βοηθήσει να το κάνουμε αυτό.
Οποιεσδήποτε ερωτήσεις σε αυτό το σημείο για κάτι που μιλήσαμε;
Awesome. Εντάξει.
>> Τώρα έχουμε περισσότερα πράγματα να συζητήσουμε.
Τι θα λέγατε για λάθη;
Πώς μπορείτε να βεβαιωθείτε ότι η ιστοσελίδα σας πρόκειται να λειτουργήσει ακόμα και όταν
κάτι κακό θα συμβεί;
Ίσως δεν έχετε μια σελίδα με το όνομα food.php.
Αλλά εγώ, πάω στην ιστοσελίδα σας και θα προσπαθήσετε να αποκτήσετε πρόσβαση food.php.
Είσαι ακριβώς πρόκειται να μου δείξει ότι η λευκή σελίδα που λέει 404 - Δεν βρέθηκε αρχείο;
Ή θα πας να πείτε, "Λοιπόν, λυπάμαι που δεν μπόρεσα να βρω αυτό για σας,
αλλά ίσως εδώ είναι μερικά άλλα εργαλεία για να σας βοηθήσει να ψάξετε για ό, τι χρειάζεστε. "
Άλλα σφάλματα - έτσι, αυτό ονομάζεται HTTP σφάλματα τα οποία είναι μερικά μόνο από τους κωδικούς σφαλμάτων
ότι ο διακομιστής σας μπορεί να σταλεί πίσω στον browser σε περίπτωση που συμβεί κάτι κακό.
400 - Bad Request. 401 - μη εξουσιοδοτημένη πρόσβαση.
403 είναι το είδος του κοινού όταν έχετε έναν κατάλογο που δεν είναι υποτίθεται ότι πρέπει να προσεγγιστεί
από τον χρήστη, αλλά ο χρήστης προσπαθεί να ούτως ή άλλως.
Και 500 - Εσωτερικό σφάλμα διακομιστή - που συνήθως συμβαίνει όταν έχετε κάτι
πραγματικά κακό συμβαίνει με PHP κώδικα σας.
Αλλά σε κάθε περίπτωση, αυτά τα είδη των browsers - αυτά τα είδη των λαθών συμβαίνουν.
>> Έτσι, πώς μπορείτε να είστε σίγουροι ότι θα χειριστεί με χάρη αυτά τα λάθη
και βεβαιωθείτε ότι ο χρήστης δεν είναι ακριβώς το είδος του κρέμεται εκεί;
Εδώ έρχεται. Htaccess.
Τώρα,. Htaccess είναι κάτι που λειτουργεί σε Apache servers,
κάτι που να λειτουργεί και λειτουργεί σε μερικούς άλλους servers, καθώς και.
Αυτό είναι απλά ένας τρόπος για να μπορείτε να διαμορφώσετε το διακομιστή σας, έτσι ώστε
μπορείτε να το κάνετε ό, τι θέλετε να κάνετε.
Μερικά πράγματα που θα μπορούσατε να κάνετε. Θα μπορούσατε να ελέγξετε τις ρυθμίσεις cache σας.
Ίσως υπάρχει κάποια σελίδα στον ιστοχώρο σας να βεβαιωθείτε ότι ο χρήστης
εκ νέου λήψη κάθε φορά που ο χρήστης έρχεται και επισκέπτεται την ιστοσελίδα σας.
Ή ίσως έχετε κάποια διεύθυνση URL που είναι σαν yoursite.com / δοκιμών / html / pages / hello.html
και απλά θέλετε ότι για να είναι yourname.com / γειά σου -. καλά, μπορείτε να χρησιμοποιήσετε το htaccess
να ανακατευθύνει τη μία ιστοσελίδα στην άλλη.
Μπορείτε επίσης να το χρησιμοποιήσετε για να κάνει έλεγχο ταυτότητας.
Ίσως υπάρχουν κάποια τμήματα της ιστοσελίδας σας ότι θα πρέπει να χρησιμοποιήσετε έναν άλλο κωδικό.
Μπορείτε να αποκλείσετε συγκεκριμένες διευθύνσεις IP, μπλοκάρει ορισμένους τομείς.
Ίσως το μόνο που πραγματικά δεν αρέσει φοιτητές του Χάρβαρντ που χρησιμοποιούν την ιστοσελίδα σας.
Λοιπόν, έχετε την επιλογή να μπλοκάρει όλες τις διευθύνσεις IP του Χάρβαρντ.
>> Τέλος, μπορείτε να προσφέρετε τα πράγματα - μπορείτε να γράψετε συγκεκριμένο κωδικό για να κάνετε server σας
φέρεσαι σαν. Zhao ή. το όνομά σας ή. γεια σελίδες κώδικα PHP.
Ίσως αυτό θα είναι χρήσιμο. Ίσως αυτό δεν θα είναι.
Και τέλος, μπορείτε να το χρησιμοποιήσετε για να χειριστεί αποκρίσεις σφαλμάτων.
Τι εννοώ με αυτό;
Εάν απλά προσθέστε κώδικα όπως αυτό - ErrorDocument 404 και στη συνέχεια να τις απευθύνετε κάποια
σελίδα λάθους, μπορείτε να βεβαιωθείτε ότι ο χρήστης δεν βλέπει μόνο το πραγματικά πολύ άσχημο
404 και να τους δείξουμε κάτι καλό.
>> Ας ρίξουμε στην πραγματικότητα μια ματιά στο πώς μπορούμε να το κάνουμε αυτό με Pset σας 7.
Εδώ, είμαι στη συσκευή μου.
Πάω να ανοίξει Chrome, και στη συνέχεια, Πάω να προσπαθήσω να αποκτήσετε πρόσβαση σε μια σελίδα
που δεν υπάρχει σε CS50 Οικονομικών.
Έτσι, η τοπική υποδοχής - cats.php-κι έτσι, παρατηρήσετε ότι έχω δημιουργήσει ένα έγγραφο του σφάλματος
που λέει, "Canz να βρούμε z σελίδα!"
Έχει μια πολύ θλιβερή γάτα σε αυτό.
Αν πάτε στο Twitter, αν πάτε σε οποιαδήποτε από αυτές τις ιστοσελίδες,
δεν μπορείτε να βρείτε μια σελίδα, συνήθως προσπαθούν να σας δείξω ένα χαριτωμένο εικόνα
έτσι ώστε να μην είστε πάρα πολύ απογοητευμένος.
Θα μπορούσε επίσης να έχει κάτι που είναι πιο επαγγελματίας που λέει,
καλά, λυπάμαι που δεν μπόρεσα να βρω τη σελίδα, αλλά ίσως εδώ υπάρχει ένα πλαίσιο αναζήτησης.
Ή ίσως εδώ είναι μερικές συνδέσεις που θα σας βοηθήσουν να βρείτε το σύνδεσμο που θέλετε.
Έτσι, πώς το κάνω αυτό; Πώς είναι αυτό δυνατό ακόμη;
Αν πάμε σε τερματικό σταθμό μας εδώ -
Είμαι ακριβώς πρόκειται να κάνετε ζουμ σε ένα κομμάτι -
παρατηρήσετε ότι έχω μια νέα σελίδα.
Μέσα HTML κατάλογο μου λέγεται - δεν μπορείτε να το δείτε -
λέγεται error.php.
Και error.php είναι απλά ένα αρχείο που έκανα
που σας δείχνει ότι η ίδια τη σελίδα.
Μπορώ να σας δείξω τι error.php είναι.
Είναι ακριβώς αυτή τη σελίδα.
Λέει, "δεν Ω, όχι! Canz βρείτε z σελίδα!"
Και, αν θέλετε να δείτε - έτσι, παρατηρήσετε ότι htaccess είδος είναι ένα παράξενο όνομα..
Ξεκινά με μια τελεία που σημαίνει ότι είναι ένα σύστημα αρχείων.
Είναι ένα κρυφό αρχείο που δεν εμφανίζονται συνήθως.
Αν το κάνετε ls-a, μπορείτε να δείτε όλα τα κρυφά αρχεία σε ένα συγκεκριμένο κατάλογο,
και μάλιστα, θα δείτε. htaccess είναι ένα από αυτά.
Ας πάμε μπροστά και να ανοίξει htaccess. -
με το gedit -
Boom! Το μόνο που έχω είναι μια γραμμή εκεί - έγγραφο σφαλμάτων για σφάλματα 404
οποία είναι επίσης γνωστή ως αρχείο μη-διαπίστωσε σφάλματα.
Ας τους κατευθύνετε σε κάτι που ονομάζεται error.php.
Μπορείτε να διασκεδάσετε πράγματα σαν να μην canz βρείτε z σελίδα!
Και υπάρχουν επίσης πολύ cool πράγματα που μπορείτε να κάνετε με. Htaccess.
Εάν θέλετε να δείτε περισσότερα. Htaccess μαγεία,
Αυτό είναι ένα πολύ δροσερό ιστοσελίδα για να πάει στο - λέγεται javascriptkit.com/howto/htaccess.shtml--
αν θέλετε να εκτελέσετε πιο μαγικό διακομιστή. Και θα μπορούσε να είναι πολύ διασκεδαστικό.
>> Ουφ! Εντάξει! Πιο χαριτωμένο εικόνες.
Αυτό είναι ένας τύπος κάνει push-ups, και τη γάτα του, προσπαθεί να βοηθήσει. Νομίζω ότι είναι πολύ χαριτωμένο.
Δυστυχώς, δεν έχω μια γάτα σαν αυτό.
Εντάξει. Έτσι, έχουμε μιλήσει. Htaccess.
Έχουμε μιλήσει για την αντιμετώπιση των λαθών.
Έχουμε μιλήσει για τη φιλοξενία, τα ονόματα τομέα.
Έχουμε μιλήσει για τη συμβατότητα cross-browser.
Τώρα, πώς μπορούμε να βεβαιωθείτε ότι η ιστοσελίδα σας εκτελεί στην πραγματικότητα;
Πώς μπορούμε να διασφαλίσουμε ότι αν πάω στην ιστοσελίδα σας
Μπορώ να δω τη σελίδα σας μέσα σε λίγα δευτερόλεπτα;
Ένα από τα πράγματα που πιστεύω ότι οι άνθρωποι ακριβώς το είδος των ξεχάσουμε
είναι η βελτιστοποίηση της εικόνας.
Ας πούμε ότι θέλετε να βάλετε μια εικόνα στο site σας
και είναι 2 mg μεγάλο.
Αυτό μπορεί να είναι καλό για εμάς, γιατί είμαστε στο Χάρβαρντ,
και έχουμε μια πολύ γρήγορη σύνδεση στο Internet.
Αλλά φανταστείτε κάποιον στην Κίνα. Φανταστείτε κάποιον στην Ινδία.
Φανταστείτε κάποιον που ίσως σε αγροτικές Κάνσας που δεν ίσως να μην έχουν το ίδιο είδος
ευρυζωνική σύνδεση στο Διαδίκτυο που έχουμε.
Εάν έχετε ένα 2 MB εικόνας στην ιστοσελίδα σας και ο χρήστης προσπαθεί να έχει πρόσβαση,
πρόκειται να τους πάρει πολύ καιρό για να κατεβάσετε.
Έτσι, αν δεν χρειάζεται αυτό το είδος της ανάλυσης,
τότε μπορείτε να αλλάξετε την εικόνα σας με κάτι σαν το Adobe Photo Shop.
Συνήθως, υπάρχει μια επιλογή που ονομάζεται ασφαλές για το web και συσκευές,
και αυτό που κάνει είναι να αφαιρεί από το σύνολο των περιττών πληροφοριών
και το είδος των συμπυκνώνει το αρχείο σας σε ένα μικρό μέγεθος της εικόνας ώστε να μπορείτε να
βάλετε στην ιστοσελίδα σας, και κάθε χρήστης που προσπαθεί να κατεβάσετε αυτή τη σελίδα
πρόκειται να κατεβάσετε μια μικρότερη έκδοση της εικόνας σας.
Εάν δεν έχετε το Adobe Photo Shop
webresizer.com είναι επίσης ένα άλλο πόρο όπου μπορείτε να εισαγάγετε την εικόνα σας
και θα φτύσει ακριβώς την ίδια εικόνα,
αλλά θα είναι κάτι σαν 3 φορές μικρότερο.
Έτσι, αυτό είναι πολύ χρήσιμο για τους χρήστες σας.
>> Ένα άλλο πράγμα που μπορείτε να κάνετε είναι minify κώδικα.
Αν ρίξουμε μια ματιά στο Google.com,
θα δείτε ότι δεν είναι το είδος του ίδιου HTML και CSS που έχουμε συνηθίσει.
Απλά πρόκειται να δούμε τον πηγαίο κώδικα εδώ.
Αν Απλά μετακινηθείτε προς τα κάτω - wow, που μοιάζει αρκετά αηδιαστικό.
Αυτό θα πάρει ένα μηδενικό στο στυλ.
Αν κωδικοποιούνται αυτό για Pset σας, θα πάρετε ένα μηδενικό στο στυλ σας.
Αυτό δεν έχει καμία απόσταση. Τα ονόματα φαίνονται πραγματικά αινιγματική.
Είναι όλα πραγματικά αηδιαστικό.
Και το σενάριο να κλείσει στο σώμα - το HTML κλεισίματος -
από όπου και αν όλοι μαζί - όλα smushed μαζί.
Γιατί το κάνουν αυτό;
Θα minified τον κωδικό τους.
Παρατηρήστε ότι το έγγραφο αυτό πρόκειται να είναι ένα πολύ μικρότερο
για μένα να κατεβάσετε ό, τι κάτι με άσπρο διάστημα,
από ό, τι κάτι με πραγματικά μεγάλη ονόματα μεταβλητών.
Αν minify τον κωδικό σας απομακρύνουν όλα το λευκό κενό.
Φυσικά, ο browser σας δεν νοιάζεται αν έχετε οποιαδήποτε λευκό χώρο στον κώδικά σας.
Μπορείτε να βγαίνουν έξω, τώρα μπορώ να κατεβάσω ένα μικρότερο αρχείο -
τώρα το αρχείο - το έγγραφο που θα πάμε για να κατεβάσετε έχει μικρότερο μέγεθος αρχείου,
θα είναι πιο γρήγορα για μένα να κατεβάσετε, και αυτό είναι χρήσιμο.
Εάν εργάζεστε με ιστοσελίδες και είστε έναρξη μιας ιστοσελίδας,
είναι σχεδόν πάντα καλό να minify τον κωδικό σας.
Ένας άλλος λόγος θα μπορούσε να είναι καλό είναι ίσως δεν θέλετε άλλους να χρησιμοποιούν τον κωδικό σας.
Ίσως δεν θέλετε οι άλλοι να χρησιμοποιήσετε CSS σας.
Ξέρετε αν πραγματικά ήθελε να είναι τσιγκούνης με αυτό,
τότε μπορείτε να minify και τον κωδικό σας, και θα ήταν πιο δύσκολο για μένα να το κλέψει
γιατί δεν έχω ιδέα τι συμβαίνει.
Μπορείτε επίσης να πάτε σε δικτυακούς τόπους όπως minify.avivo.si.
Υπηρεσίες όπως αυτό το online να σας βοηθήσει να minify τον κωδικό σας, ώστε να μην χρειάζεται να το κάνουμε με το χέρι.
Σίγουρα δεν το κάνει με το χέρι.
>> Εντάξει. Τώρα, μιλώντας για σενάρια.
Ίσως σε PHP κωδικό σας, υπάρχει κάτι που δεν πρέπει να κάνετε.
Ίσως υπάρχει επιπλέον βρόχους εκεί.
Μιλήσαμε για το σχεδιασμό κώδικα CS50.
Ακόμα και αν είστε κωδικοποίηση σε C, αν έχετε - αν κάνετε επιπλέον εργασία
ότι δεν πρέπει να κάνετε, καλά, αυτό πρόκειται να επιβραδύνει scripts σας στην ιστοσελίδα σας,
και αυτό είναι ιδιαίτερα σημαντικό για τους ιστοχώρους, επειδή οι χρήστες στις μέρες μας είναι πολύ ανυπόμονος.
Αν κάνεις περιττές εργασίες, πρόκειται να διαρκέσει περισσότερο
για να πάρετε τις πληροφορίες που θέλουν, και πρόκειται να είναι πολύ δυσαρεστημένοι.
Τέλος, μπορεί να θέλετε να βελτιστοποιήσετε πίνακες της βάσης δεδομένων σας.
Θυμηθείτε μιλήσαμε για ευρετήρια.
Δεν είναι μόνο καλό για να είστε βέβαιοι ότι έχετε μια γραμμή που είναι μοναδικό.
Είναι επίσης καλό να βεβαιωθείτε ότι η βάση δεδομένων σας λειτουργεί γρήγορα.
Αν θέλετε να διαβάσετε επάνω σε αυτό, πηγαίνετε στο φάκελο της MySQL,
ή μπορείτε να δείτε - καλά, πώς μπορώ να βελτιώσω πίνακα της βάσης δεδομένων μου;
Πώς μπορώ να βεβαιωθώ ότι έχω δείκτες που να με βοηθήσει να πάρετε τις πληροφορίες πιο γρήγορα;
>> Υπάρχουν επίσης μικρά κόλπα που μπορείτε να χρησιμοποιήσετε σαν caching.
Αν έχετε PHP - αν έχετε ένα blog, για παράδειγμα,
και έχετε - και αυτό είναι που κινούνται με PHP ή οποιαδήποτε άλλη γλώσσα -
μπορείτε να cache blog σας, ας πούμε, 50 λεπτά με τα χρονικά διαστήματα, έτσι ώστε να μπορεί να εξυπηρετήσει στατικές σελίδες
ή στατική HTML για τους επισκέπτες στο site σας.
Με αυτόν τον τρόπο οι χρήστες δεν χρειάζεται να τρέξει PHP script σας κάθε φορά,
και ίσως αυτό θα είναι πιο γρήγορα για να έχουν πρόσβαση σε αυτές τις πληροφορίες.
>> Και τέλος, μπορείτε να χρησιμοποιήσετε κάτι σαν CDN.
Παρατηρήστε ότι κάθε φορά που θα κατεβάσετε ένα Pset,
μπορείτε πάντα να πάτε στο CDN.CS50.net. Γιατί συμβαίνει αυτό;
CS50 χρησιμοποιεί επίσης το είδος του σαν ένα CDN - ένα δίκτυο διανομής περιεχομένου -
πράγμα που σημαίνει απλά ότι είναι μια δέσμη των servers ίσως κάπου σε όλο τον κόσμο
που βοηθούν εξυπηρετούν τις σελίδες σας για τους επισκέπτες σας.
Αν ο επισκέπτης σας είναι να πάρει μια σελίδα από ένα διακομιστή που είναι πιο κοντά σε αυτούς γεωγραφικά,
τότε πιθανότατα ο επισκέπτης σας πρόκειται να πάρει αυτό το αρχείο πολύ πιο γρήγορα.
Υπάρχουν επίσης σε απευθείας σύνδεση πηγές που σας βοηθούν να το κάνουμε αυτό.
Ένας από αυτούς είναι CloudFlare. Προσφέρουν μια δωρεάν υπηρεσία CDN.
Αν έχετε μεγάλα αρχεία που εξυπηρετούν σας στους χρήστες σας,
τότε ίσως είναι καλύτερα να τα βάλει σε ένα CDN έτσι ώστε να μπορούν να τους γρηγορότερα.
>> Το τελευταίο θέμα της ημέρας είναι η βελτιστοποίηση μηχανών αναζήτησης.
Τι είναι η βελτιστοποίηση μηχανών αναζήτησης;
Αυτό είναι να διασφαλίσουμε ότι οι μηχανές αναζήτησης όπως το Google ή το Bing ή το Yahoo
μπορεί να πάει στο site σας και να ανιχνεύσουμε τον ιστότοπό σας και το δείκτη ιστοσελίδα σας και όταν
Εγώ, για παράδειγμα, πηγαίνετε στο Google.com και να προσπαθώ να ψάξει για κάτι,
τότε το site σας θα εμφανιστεί.
Πώς μπορείτε να βεβαιωθείτε ότι η ιστοσελίδα σας είναι ένα από τα top 10;
Διότι, όπως όλοι γνωρίζουμε, αν ψάχνετε για κάτι στο Google
και δεν είναι στο top 10 είστε πιθανότατα δεν πρόκειται να δούμε στο επόμενο 10.
Αυτό είναι το είδος του θέματος που είναι ένα πέπλο μυστηρίου.
Υπάρχει μια μεγάλη διαφημιστική εκστρατεία εκεί έξω στο διαδίκτυο.
Υπάρχουν πολλές δεισιδαιμονίες για το αν κάνετε x τότε η Google θα σας αρέσει καλύτερα.
Αν y τότε η Google θα σας αρέσει καλύτερα.
Είναι ίσως καλύτερα να εξετάσει τα έγγραφα του γίγαντα αναζήτησης ίδια.
>> Αυτό είναι ένα από τα έγγραφα στο Google που σας πω ακριβώς πώς να βελτιστοποιήσετε το site σας
έτσι ώστε το Google μπορεί να έχει πρόσβαση και το δείκτη αυτό πολύ όμορφα.
Δεν χρειάζεται να αντιγράψετε κάτω από αυτό το URL, επειδή η παρουσίαση αυτή πρόκειται να
να είναι σε απευθείας σύνδεση έτσι κι αλλιώς.
Αν κοιτάξετε σε αυτό και μπορείτε να διαβάσετε αυτό, υπάρχουν μερικές πολύ χρήσιμες συμβουλές εκεί.
Η Google σας λέει - αν πραγματικά θέλετε το site σας να αναπροσαρμόζονται και
τότε θα πρέπει να κάνετε όλα αυτά τα πράγματα.
>> Ένα άλλο πράγμα ότι οι μηχανές αναζήτησης ήθελα πραγματικά είναι φρέσκο ​​περιεχόμενο.
Εάν έχετε περιεχόμενο που ενημερώνεται πολύ τακτικά
τότε οι μηχανές αναζήτησης να πω, ooh, μου αρέσει το site σας.
Πάω να πάει στο site σας πολύ συχνά.
Πάω να δείκτη πολλές σελίδες σας.
Αν έχετε φρέσκο ​​περιεχόμενο, τότε είναι πιο πιθανό να εμφανιστούν -
είστε πιο πιθανό να είναι πιο σχετικό.
Είσαι πιο πιθανό να είναι πιο ενημερωμένο,
και οι μηχανές αναζήτησης είναι πιο πιθανό να βάλει το site σας πάνω από τους άλλους.
>> Βαθιά συνδέσεις είναι επίσης σημαντικές.
Αν ήθελε πραγματικά το site σας να φανεί καλό στα μάτια μιας μηχανής αναζήτησης
έχουν πολλές άλλες ιστοσελίδες που συνδέονται με αυτήν και συνδέεται βαθειά στην ιστοσελίδα σας.
Μην μόνο σύνδεση στην αρχική σελίδα σας.
Link to ίσως yourname.com / κάτι / κάτι / something.php.
Αυτό - σε μια μηχανή αναζήτησης - μέσα, wow, έχουν πραγματικά ενδιαφέρον περιεχόμενο
ότι κάποιος άλλος συνδέει τόσο βαθιά στο site τους ότι θα ήθελα πραγματικά, πραγματικά
να δώσει μεγαλύτερη σημασία στις σελίδες αυτού του ιστότοπου.
>> Αν έχετε ακριβή σελίδα τίτλους, αν δεν έχετε λάθη που είναι καλό γιατί
Αν μια μηχανή αναζήτησης προσπαθεί να επισκεφθείτε την ιστοσελίδα σας, και να πάρει ένα σφάλμα,
είναι κατά πάσα πιθανότητα πρόκειται να παραιτηθεί πολύ, πολύ σύντομα.
Και τέλος, θέλετε να έχετε ένα γρήγορο χρόνο φόρτωσης, επειδή οι μηχανές αναζήτησης -
ακριβώς όπως οι άνθρωποι - μην έχουν πολλή υπομονή για την αργή ιστοσελίδες.
Αυτός είναι ένας τρόπος για να βεβαιωθείτε ότι έχετε δείξει μέχρι υψηλότερη σε
ερωτήματα αναζήτησης του κινητήρα και ελπίζουμε να πάρει αυτόν τον τρόπο μεγαλύτερη επισκεψιμότητα.
Επειδή μετά από όλα, έχετε περάσει όλο αυτό το διάστημα την ανάπτυξη της ιστοσελίδας σας.
Θα περάσει όλο αυτό το διάστημα την έναρξη αυτής της ιστοσελίδα στο διαδίκτυο.
Θέλετε να βεβαιωθείτε ότι έχετε την αφθονία των χρηστών που βλέπουν πραγματικά το περιεχόμενό σας.
>> Άλλες καλές πόρους για να χρησιμοποιήσετε.
Google Webmaster Tools είναι κάτι για να εξετάσει για να.
Αυτό βοηθά μόνο να δείτε - Google δεν είναι ευρετηρίαση του ιστοτόπου μου.
Ποια τα είδη των λαθών είναι αυτό που αντιμετωπίζει;
Πόσες σελίδες έχει ευρετήριο;
Τι πιστεύετε ότι είναι το πιο σημαντικό περιεχόμενο στη σελίδα μου;
Ίσως αυτό δεν είναι αυτό που θέλω να είναι.
Ίσως χρειαστεί να αλλάξετε ιστοσελίδα μου λίγο έτσι ώστε να αντανακλώνται καλύτερα
τι ιστοσελίδα μου είναι πραγματικά περίπου.
Google Analytics είναι ένα άλλο πραγματικά δροσερό εργαλείο.
Μπορείτε να προσθέσετε ένα μικρό κομμάτι της JavaScript στις σελίδες σας.
Και στη συνέχεια, μετά μπορείτε να πάτε στο Google Analytics και θα παρακολουθείτε
Δημογραφικά στοιχεία επισκεπτών σας και την ανάπτυξη το site σας.
Θα σας πω ακριβώς πώς πολλοί επισκέπτες επισκέπτονται το site σας
εντός μια συγκεκριμένη ημέρα, μέσα σε ένα ορισμένο ώρες, μέσα σε ένα ορισμένο εβδομάδα.
Πόσοι επισκέπτες από την Κίνα; Πόσοι επισκέπτες από την Ανταρκτική -
παίρνετε την ιστοσελίδα σας.
αυτό μπορεί να είναι κάτι δροσερό για να δείτε ή θα μπορούσε να είναι χρήσιμη
επειδή προσπαθείτε να στοχεύσετε μια συγκεκριμένη ομάδα.
Ίσως προσπαθείτε να στοχεύσετε τους εφήβους με την ιστοσελίδα σας, και θα δείτε ότι
οι περισσότεροι από τους επισκέπτες της ιστοσελίδας σας είναι ίσως 30 - έως 40 ετών,
τότε ίσως είτε έχετε κάποιο πρόβλημα ή μπορείτε απλώς να πω,
καλά, τότε ίσως θα πρέπει να αλλάξει μόνο εστίαση ιστοσελίδα μου, έτσι ώστε
Θα επικεντρωθεί περισσότερο σε αυτή την ηλικιακή ομάδα.
>> Google Apps - αν θέλετε να έχετε το είδος των e-mail με το όνομα τομέα σας -
ίσως κάτι σαν yourname@yourname.com--
μπορείτε να χρησιμοποιήσετε το Gmail διευθύνσεις - μπορείτε να χρησιμοποιήσετε την υπηρεσία Gmail
και το Google Apps είναι ένας τρόπος να το κάνουμε αυτό.
Μπορείτε να ρυθμίσετε συγκεκριμένες διευθύνσεις ηλεκτρονικού ταχυδρομείου που είναι ειδικά για σας domain name
αντί of@gmail.com.
>> Και τέλος, υπάρχουν web επεκτάσεις του έργου και add-ons - για το Chrome,
για τον Firefox, για άλλα προγράμματα περιήγησης - που επιτρέπουν σε σας για να πάτε και να επιθεωρήσει
CSS, JavaScript επιθεωρεί, να δούμε ακριβώς τι είναι λάθος με JavaScript script σας,
και ίσως αυτό θα είναι χρήσιμο για την de-υποκλοπών σκοπούς σας, για να μπορείτε να ανακαλύψει -
Λοιπόν, γιατί δεν είναι ιστοσελίδα μου εμφανίζει σωστά σε αυτό το πρόγραμμα περιήγησης;
>> Και τέλος, αν θέλετε να μάθετε περισσότερα για όλα αυτά τα θέματα -
αν θέλετε να μάθετε περισσότερα σχετικά με HTML και CSS και JavaScript -
διότι μετά από όλα, θα διδάσκεται μόνο μια λίγο -
μπορείτε να πάτε ιστοσελίδες όπως W3Schools.com να ψάξουν για περισσότερους πόρους.
Έχουν πολύ ωραία tutorials για το πώς μπορώ να κάνω x ή y τι σημαίνει;
Αν θέλετε να μάθετε περισσότερα σχετικά με αυτές τις γλώσσες, μπορείτε απλά να πάτε εδώ.
>> Εντάξει. Νομίζω ότι ήθελε να αφήσει τα τελευταία λεπτά του αυτή για τις ερωτήσεις,
έτσι ώστε οι τυχόν ερωτήσεις σχετικά με κάτι που μιλήσαμε για εκεί;
[Μέλος του ακροατηρίου] Τι είδους πράγματα είναι σχετικά W3Schools και πώς καλύπτεται;
[Yuechen Zhao] Τι είδους πράγματα;
Έτσι, ένα από τα μεγαλύτερα πράγματα που χρησιμοποιώ πολύ είναι οι αναφορές τους.
Αναφορές τους λεπτομέρεια, για παράδειγμα, για CSS -
τι σημαίνει αυτό ή αν θέλετε να αλλάξετε το φόντο μιας σελίδας -
Πώς το κάνεις αυτό;
Ποια προγράμματα περιήγησης υποστηρίζουν ότι η εντολή; Τα πράγματα όπως αυτό.
Και τότε, επίσης, έχουν μόνο πολύ ωραία tutorials για το HTML, την PHP, την JavaScript,
την MySQL, σε όλα τα είδη των διαφορετικών θεμάτων.
Έχουν ωραία tutorials. Θα σας διδάξει πώς να κάνει τα πράγματα.
Είναι ωραίο να είναι σε θέση να πάει και να μάθετε περισσότερα για αυτά τα θέματα.
>> [Μέλος του ακροατηρίου] HTML 5 δεν είναι ακόμη συμβατό με όλους τους browsers εκεί έξω.
Θα σας προτείνουμε απλά μείνετε μακριά από αυτό λόγω των ζητημάτων συμβατότητας;
Πώς θα ασχοληθεί με αυτό;
[Yuechen Zhao] Ναι, ναι, το ερώτημα είναι HTML5 εξακολουθεί να είναι ένα πρότυπο το μωρό.
Δεν είναι πραγματικά υποστηρίζεται από πολλά προγράμματα περιήγησης, έτσι και εμείς πρέπει να το αποφύγει;
Πέρυσι νομίζω ότι θα ήμουν ένας πολύ μεγάλος υποστηρικτής του, ας μην HTML5
επειδή εξακολουθεί να είναι - είναι ακόμα πολύ νέα και στην πραγματικότητα, το HTML5 πρότυπο
δεν έχει οριστικοποιηθεί ακόμα.
Και έτσι, πραγματικά δεν υπάρχει κανένα πρότυπο HTML5.
Αλλά νομίζω ότι ειδικά αν είστε σχεδιασμό μιας ιστοσελίδας τώρα,
θα μπορούσε να είναι καλύτερα αν πήγαινε με HTML5, διότι αυτό είναι το είδος της πρόκειται να είναι το μέλλον,
και αν θέλετε την ιστοσελίδα σας να είναι το μέλλον-απόδειξη και θέλετε τον ιστοχώρο σας στην εργασία
στο μέλλον browsers, θα ήταν καλύτερα να ξεκινήσει κάτι κτίριο για το μέλλον
ό, τι για το παρελθόν, αλλά και ακριβώς λόγω του γεγονότος ότι το HTML5 δεν είναι πραγματικά ότι διαφορετικά
από HTML4 ή XHTML.
Εάν χρησιμοποιείτε HTML5, τι κανονικά θα λειτουργήσει στα περισσότερα προγράμματα περιήγησης.
Απλά πρέπει να ταξινομήσετε του να πάει και να βεβαιωθείτε ότι με αυτά τα στιγμιότυπα
και να διασφαλίσουμε με πηγαίνει για τον εαυτό σας σε αυτές τις ιστοσελίδες.
Αλλά το πιο πιθανό είναι ότι θα λειτουργήσει αν δεν είστε με πολύ συγκεκριμένα χαρακτηριστικά για HTML5.
Παρατηρήστε επίσης ότι για CS50 - για παράδειγμα, το video player που χρησιμοποιούμε -
χρησιμοποιεί HTML5 και HTML5 βίντεο και να προβάλετε τις διαλέξεις.
Αλλά εάν έχετε ένα πραγματικά παλιό πρόγραμμα περιήγησης, τότε θα πέσει πίσω στο Flash.
Έτσι, αυτό είναι επίσης κάτι άλλο -
έχουν μια πτώση-back σύστημα, όταν ξέρετε ακριβώς ότι ο browser δεν πρόκειται να χειριστεί
τι θέλετε να χειριστείτε.
>> Άλλες ερωτήσεις;
Ό, τι μιλήσαμε.
Εντάξει. Τότε πιστεύω ότι είναι γι 'αυτό για μένα.
Νομίζω ότι είναι αυτό.
(Χειροκροτήματα)
Cool.
[CS50.TV]