[Powered by Google Translate] [Seminarium] [Förbereda din webbplats för webben]
[Yuechen Zhao] [Harvard University]
[Detta är CS50.] [CS50.TV]
>> Okej. Här är en annan timme av webbutveckling om ni är upp för det.
Idag ska jag tala om att förbereda din webbplats för webben.
Hela dagen - och förmodligen för de senaste 2 veckorna -
Vi har pratat om hur man skapar en webbplats,
hur man använder HTML, hur man använder PHP, hur man använder ramar,
hur du kontrollerar att du kan interagera med databasen - sånt.
Men idag, vi kommer att tala om var din webbplats kommer att leva efter CS50.
För trots allt, det händer CS50 inte tidigare December.
Vi kommer att tala om domännamn, hosting.
Vi kommer att tala om vad kompatibilitet med olika webbläsare
och plattformsoberoende kompatibilitet är, och hur man kan se till att din webbplats
kommer att fungera under alla förhållanden.
Vi pratar om felhantering och andra server magi.
Vi pratar om prestandaoptimering, sökmotoroptimering,
och hur man får folk att faktiskt besöka dina webbplatser.
Och slutligen, för att bara några bra resurser att se till att ni har tillräckligt av dem
att gå ut med din slutliga projektet, och förhoppningsvis efter.
>> Det första som vi kommer att prata om är domännamn.
Just nu är du programmerar in din apparat, kommer du till en lokal värd
som egentligen inte ett domännamn.
Det blir liksom bara ett smeknamn eller ett alias för din faktiska Linux-installation
insidan av antingen VMware på en Mac eller VMware Player på en dator.
Domännamn kan du få en plats på webben och sedan gå till något som
www.google.com och få hemsidan.
Hur fungerar de?
Låt oss säga att du är bara en vanlig webbserver -
genomsnittlig Internetanvändare och du har en bärbar dator, och du går till www.howstuffworks.com.
Du kan förmodligen se var jag stal denna från.
Hur funkar - datorn kommer sedan be en lokal DNS-server,
"Vet du var här webbplatsen är?"
"Vet du IP-adressen för www.howstuffworks.com?"
Din DNS-server kan säga, "Ja, det gör jag."
I så fall får du en IP-adress, och datorn åtkomst som IP-adress.
Om den inte gör det, frågar den en annan DNS-server, "Hey! Vet du vad www.howstuffworks.com är?"
Denna server kan säga, "Ja, det gör jag."
Så berättar den andra vad det är, och slutligen, blir att information skickas till din dator,
och du kan komma åt howstuffworks.com.
>> Hur kan du få en av dessa magiska saker?
Hur kan du få kanske www.yourname.com eller www.ilovecats.com?
Du kan anmäla dig till en,
och det finns en hel del webbplatser där ute som tillåter dig att göra det.
Du måste - i de flesta fall måste du betala för dem.
Det finns vissa domännamn som är gratis.
Om du går till www.co.cc eller. Tkdomainnames, de är gratis.
Men, de kommer med vissa begränsningar, och i själva verket en del av dem kanske inte ens
verkliga, top-level domännamn som. com eller. net.
Normalt skulle jag föreslå att gå till en av dem
eftersom användarna är bara mer bekväm med dem.
Du har sett en hel del. Coms. Du har sett en hel del. Nät.
Du har förmodligen inte har sett en hel del. Co.cc 's, så de är svårare att komma ihåg.
Olika webbplatser som GoDaddy eller NameCheap eller - Jag använde en som är
slags skissartade - kallad activedomain.com.
Det ser verkligen luddigt, men det har fungerat riktigt bra för mig.
>> Och slutligen, har ni andra som kanske gör mer reklam som Network Solutions.
Men om du går in på NetworkSolutions.com och titta på deras prissättning
det är verkligen dyrt. Jag tittade på dem i går kväll.
För ett år för ett domännamn, är det förmodligen inte värt så mycket pengar.
I själva verket, om du får en. Com eller. Org eller. Net
det vanliga priset är ca $ 10 per år.
Så om du betalar mycket mer än så, det är nog inte så värt det
eftersom, trots allt, gör dessa webbplatser inte något med det domännamnet.
De ger bara det till dig, och så om du kan få den för billigt, varför inte?
>> Den andra saken är när du har ditt domännamn, så har du förmodligen vill
gå vidare till antingen Godaddy.com eller var du köpte ditt domännamn
och ange namnservrarna för det domännamnet.
Vad det betyder är när en användare går till www.howstuffworks.com,
dessa namnserveradresserna IP-adresser är de IP-adresser som de skulle kunna titta upp.
De skulle kunna komma åt din webbplats via dessa namnservrar.
Om du ansöker om värd någonstans
då din värd kommer sannolikt att ge dig de namnservrar som ska användas.
>> Och slutligen, det är det här som kallas en WHOIS.
En WHOIS-databas är en databas som du kan mata in ett domännamn
och det kommer att spotta ut lite information om ägaren av denna webbplats och andra kontaktuppgifter.
Nu kanske du säger, "Jag vill verkligen inte min hemadress eller jag vill verkligen inte min e-postadress
på hemsidan för alla att se eller på Internet för alla att se. "
Då kanske du vill använda något som en hel del webbhotell tjänster ger -
som en WHOIS chef.
En WHOIS chef är helt enkelt en annan tjänst som många av dem ger att
hudar bort denna information och sätter bara på vem som är chef för namnet -
för adressen är det oftast bara att företagets namn som har gett dig detta domännamn -
och så då din personliga information inte ska läcka på Internet,
vilket är oftast ganska bra.
Själv använder jag en av dessa tjänster.
Om du inte bryr dig om din egen integritet så det spelar ingen roll egentligen.
>> En DNS-server står för Domain Name System, och vad det är -
det är ungefär som en hash tabell någonstans som säger,
"Denna webbadress kommer att mappa till denna IP-adress." Och det är allt det är.
Så när du frågar denna DNS-server, då kan du få IP-adresser
för att motsvarande domännamn och sedan besöka denna webbplats.
(Publiken ställa en fråga - ohörbart)
Den första? Den första nivån är faktiskt oftast bara datorns cache själv.
Datorn slags minns den senaste gången du gick till www.google.com
Det var vid denna IP-adress, och sedan efter ett tag, kommer att cache ut,
och det kommer att ställa ut på Comcast DNS,
"Hej, vad är www.google.com?"
Normalt när du köper ett domännamn och du registrerar en, och du skapar en webbplats,
du kan inte gå till webbplatsen omedelbart med att domännamnet eftersom namnservrar
över hela världen vet inte om ditt domännamn ännu. Det har att fylla.
Det brukar ta ca 24-48 timmar.
Okej. Så, det är lite om domännamn. De är väldigt cool.
Jag tycker du ska få en om du menar allvar med projektet
och om du verkligen vill göra projektet känt i hela campus,
har ett domännamn gör att det ser riktigt professionellt.
>> Sen nästa steg, naturligtvis, är att ha någon form av hosting.
Om du bara lägga upp den på din dator, har ingen någonsin kommer att kunna gå till den.
Du skulle kunna ställa upp en server på datorn och hålla datorn i evigheter,
men det är inte rekommenderat.
Det finns olika typer av hosting finns tillgängliga elektroniskt.
Det är delad hosting. Det finns VPN (ohörbart) som är virtuella värdar.
Det finns semi-dedikerade och engagerade.
Av de 3 sista, VPN, semi-dedikerad och engagerad är oftast dyrare.
De är vanligtvis används för webbplatser som kräver mer resurser.
Om du just har börjat med en hemsida,
det kan bara vara mer ekonomiskt att gå med delad hosting.
Och vad delade medel är bara ett gäng webbplatser är alla tillsammans
sortera om på en server på denna webbplats på detta värdservern, och du kan komma åt din webbplats
via domännamn.
>> Det finns en hel del populära värdar ute.
HostGator och DreamHost - de är väldigt, väldigt stora och väldigt, väldigt populär
och mycket, mycket framgångsrik.
Jag personligen använder en sk MDDHosting.
Om du går till www.mddhosting.com, det är min värd val.
Jag tycker de är mycket bra.
De har alltid varit mycket pålitlig, och jag har aldrig haft några problem med dem.
De har också mycket konkurrenskraftiga priser.
Två som jag inte gillar är GoDaddy - det är också en mycket populär värd,
men jag har haft fruktansvärda erfarenheter med dem,
och en massa människor som jag känner har haft riktigt hemska erfarenheter med dem.
De slags gå efter människor som inte vet vad de ska göra -
kanske du gör en webbplats för första gången,
och så de slags con dem att köpa deras hosting paket.
Gör inte det. Fall inte för det. Gå leta efter andra webbhotell paket som verkligen passar dina behov.
Och den andra är - det finns gratis värdar ute.
Det finns webbplatser som är värd din hemsida för gratis -
ibland genom att sätta en annons på din webbplats,
ibland genom att du deltar i deras forum,
men ibland bara också gratis.
Men, var försiktig med fri värdar eftersom många av dem egentligen bara gå i konkurs
efter några månader. Du bara inte kan hålla jämna steg med kostnaderna.
Andra är bara mycket otillförlitliga, och din webbplats kommer alltid att vara nere,
och du vill inte att det ska hända.
>> Varje värd kommer att erbjuda sin egen kontrollpanel.
Observera att din apparat, det är verkligen inte en kontrollpanel per se.
Du måste använda terminalen för att gå och redigera filerna.
Du måste chmod saker själv.
Om du ville gå till phpMyAdmin,
du måste gå till localhost @ / phpmyadmin och sånt.
Men med en kontrollpanel kan du gå in och redigera filerna på din server
med Windows Utforskaren eller ett Finder-typen application.
Eller du kan gå igenom och titta på dina databaser med egna verktyg
istället för phpMyAdmin.
Så, det finns en mängd val här, och några av de mer populära kontrollpaneler finns där uppe.
Men om du letar efter en värd,
då kanske du vill titta på vilka typer av anpassningar och tillval
de erbjuder mig att anpassa min server och att göra min hemsida springa bättre.
Så, då kanske du frågar, "Nå, hur gör jag väljer webbhotell?"
Om du går in på någon värd webbplats finns det en hel del jargong, och det finns en hel del alternativ.
Det finns en hel del olika priser också.
Normalt jag gå för de billigare bara för webbplatser som kanske du och jag gör -
och särskilt just nu, särskilt som förrätt - de kanske inte behöver så många resurser
som kanske en webbplats som Microsoft.com.
>> Först du vill titta på det operativsystemet om du är riktigt nyfiken på om
din webbplats kommer att vara värd på Linux, Windows eller på Mac.
Normalt går vi bara med Linux eftersom det är oftast det billigaste,
och även en som kanske ni är mer bekant med på grund av apparaten.
Och då, kanske de ska sätta några begränsningar på hur mycket bandbredd som du får -
som hur många megabyte eller gigabyte data kan användare ladda ner
från din webbplats per månad? Eller diskutrymme.
Hur mycket utrymme får du? Är det 500 MB? Är det 2 GB? Är det obegränsat?
Numera en hel del webbservrar ger dig obegränsad diskutrymme som ett sätt för dem
att locka dig att få deras hosting paket.
Men om du verkligen tänker på det, när kommer ni någonsin att behöva obegränsat diskutrymme?
Om du har ett par HTML-filer, ett par PHP, ett par bilder -
det är bara ett par megabyte, och så
brukar jag bara gå för kanske ett par gigabyte värde av utrymme,
och det kan vara tillräckligt för att börja mig tills jag behöver mer.
>> Slutligen kan de sätta begränsningar för vilken typ av - hur många databaser du kan ha.
Kanske du kan bara ha en databas. Kanske du kan ha 2. Kanske du kan ha 10.
Är det verkligen viktigt för dig hur många du får?
Saker att ställa dig själv.
Och slutligen, bara saker som språk.
Stöder de PHP? Stöder de MySQL?
De flesta webbhotell webbplatser stöder dessa eftersom de är fria. De är öppen källkod.
Det kostar dem något att ge dem till dig.
Men om du vill använda, säger, Ruby eller Python eller några av dessa andra språk -
de kan inte stödja dem på deras server, så det är viktigt att leta efter sådana saker.
>> Och slutligen, de tillåter dig att göra några mer avancerade saker som SSL eller cron jobb?
SSL är ett alternativ där du kan göra din webbplats säkrare genom att göra det HTTPS
och kryptera dina anslutningar.
Och cron-jobb är bara kanske skript som du vill köra
var 5 minuter, var 10 minuter, var 15.
Många delad hosting webbplatser sätter begränsningar
på antalet cron-jobb som du kan köra eftersom det tar upp mer resurser.
>> Och slutligen, precis allt annat som du vill titta på - se exakt vad som händer
innan du köper ditt webbhotell paket.
Och slutligen, prestanda. Prestanda är enorm.
Hur snabbt är min hemsida kommer att köra?
De flesta användare kommer inte att vänta ens sekunder för din webbplats att köra
innan de får bara uttråkad, och de går vidare till MeanBase och börja titta på bilderna
av katter - ni vet det händer, och du vill vara säker på att du får den användaren ombord
och att du har bra upptid vilket bara innebär att
din webbplats kommer att vara tillgänglig hela tiden.
Många värdar har riktigt dålig upptid och som bara innebär att din webbplats inte kommer att vara
tillgänglig, och du vill inte att det ska ske eftersom du kan vara ledsen.
Och du kan även spåra din värd prestanda med webbplatser som
Pingdom.com eller Host-tracker.com, och de berättar bara hur ofta är din sajt nere.
>> Och slutligen, vill du se om deras stöd.
Om du har ett problem kommer de att svara dig inom 24 timmar?
Kommer de att svara dig inom 48 timmar?
Det webbhotell som jag använder normalt svarar för mig inom minuter
vilket är riktigt trevligt.
Puh! Okej! Det är dags för en paus. Men jag tänker inte ge det till dig.
Vi ska bara titta på bilder av söta katter då och då.
>> En annan riktigt, riktigt stor sak är kompatibilitet med olika webbläsare.
Vad menar jag med kompatibilitet med olika webbläsare?
Du vet, numera är det inte bara Microsoft Internet Explorer.
Det är inte bara Mozilla Firefox eller Safari.
Nu har vi Chrome. Vi har Opera. Vi har Dolphin. Vi har Camino.
Vi har Erövraren. Vi har alla dessa olika webbläsare.
Saker som kommer ut nu - RockMelt - även om de är alla baserade på Chromium.
Men faktum är, det är inte bara en webbläsare längre.
Du är inte bara tittar på dessa webbsidor med en ansökan.
Och så kommer olika webbläsare reagera på olika HTML, olika CSS, och
annorlunda JavaScript annorlunda, och hur hanterar ni det?
Tja, i vissa fall, kan du verkligen inte.
Din webbplats - om det fungerar i en webbläsare, kommer den kod som du skrev fungerar inte
i en annan webbläsare, och det är ditt jobb att se till att den kod som du skriver
är universell, att det fungerar överallt.
Så detta är verkligen farligt.
Om du säger, "Ja, det fungerar på min dator. Great! Låt oss gå vidare."
Tja, är det förmodligen inte kommer att fungera på min, och när jag går till din webbplats
Jag kommer att bli mycket ledsen, och jag kommer att lämna direkt.
Så, låt oss se hur du kan förhindra detta.
>> Det första är naturligtvis att bara använda standard HTML, CSS och JavaScript.
Vad menar jag med det?
Tja, det finns en hel del inte vanliga saker där ute.
Till exempel i CSS finns det många versioner.
Om du ser några CSS-regler med-moz-eller-webkit-, dessa regler är särskilda
till både Mozilla webbläsare och WebKit webbläsare,
och så du vill vara säker på att du kanske vill undvika dessa saker
eftersom om du använder-moz-den regeln bara kommer att fungera på Firefox.
Och om du verkligen vill att det ska se bra ut på Internet Explorer också,
du kommer att vara ute på tur.
För HTML också, kan du göra saker i HTML som fungerar i en webbläsare
men att avbrott i en annan, och du vill undvika att så mycket som möjligt.
Och slutligen för JavaScript ens - det finns många versioner av JavaScript,
och denna sommar vi sprang in i ett problem där Document.getElementsByClassName--
som vanligtvis är en funktion som är definierad som en del av JavaScript standard -
var inte att hitta i Internet Explorer 8.
Så, under sommaren jag jobbade i ett labb och vi byggde nätet experiment.
Och vi tyckte det fungerade riktigt bra tills vi insåg användare som använder
Internet Explorer 8 inte kunde lämna in sina resultat.
Vi miste om en hel del data. Det gjorde oss verkligen sorgligt.
Så, vill du alltid vara säker på att dina skript kommer att fungera överallt.
>> Och slutligen, använd validator.w3.org
vilket är vad vi säger att du ska göra i pset 7.
Se till att dina sidor är validerade.
Det är viktigt eftersom det åtminstone är ett första steg sanity check.
Är min kod egentligen standarder kompatibel?
Ett annat sätt att sortera på att hjälpa dig se till att din webbplats kommer att fungera
i de flesta fall är att kanske använda vissa bibliotek och ramverk
eftersom dessa riktigt smarta utvecklare har tänkt på dessa frågor för dig.
De har gått igenom och de har skrivit olika funktioner som fungerar i olika webbläsare.
Till exempel använder vi jQuery i Pset 7.
Även om du kanske inte har sett det, ger jQuery en massa funktioner
som annars skulle ha att skriva själv.
Men dessa utvecklare skrev det, och de såg till att det fungerar i alla webbläsare.
Och Bootstrap - vilket är en annan CSS-ramverk som vi visade dig i Pset 7 -
Det tar verkligen bort en hel del huvudvärk med att designa webbsidor som ser bra ut.
i alla webbläsare.
>> Och slutligen, om du kan undvika det, undviker jag brukar koda från grunden.
Om du bara skapa en webbplats för din skola klubb, till exempel,
och allt du behöver göra är att visa några sidor och kanske har din president gå in
och ändra några saker här och där - det finns egentligen ingen anledning att kod som upp själv.
Det tar mycket av din tid.
Det tar en hel del av din energi, och du måste gå igenom och du måste ta reda på,
väl, detta kommer att se bra ut i den här webbläsaren, kommer det att se bra ut i den här webbläsaren.
Kanske använda en del av dessa fläckar som andra redan har skrivit för dig, liksom
WordPress eller Joomla eller Drupal.
Dessa kallas innehåll - dessa kallas CMS som i princip är bara paket som
redan kommit gjort för dig, och du kan hämta dem, sätta dem på din server,
och anpassa dem hur du vill, och du redan har en fungerande webbplats.
Dessa koden paket är något att titta in till.
Dessa saker är öppen källkod om du går för något liknande -
om du letar efter en form paket, det finns saker som inte är gratis som
VBulletin eller IP.Board.
Om du inte behöver några av dessa avancerade funktioner,
Du kan alltid välja det fria alternativet.
>> Och slutligen, är det inga undvika det.
Du måste testa, testa, testa.
Du måste testa din kod på alla dessa webbläsare och på alla dessa plattformar.
Och du vet, IE6 - har tack och lov folk började röra sig bort från IE6
eftersom tillbaka i dag, kanske ett par år sedan, hade webbutvecklare att alltid, alltid,
alltid smickra IE6 svagheter i att följa normerna.
Webbplatser såg bara typ av 1990-talet i brist på ett bättre sätt att handskas med det.
Du kan också använda webbläsaren skärmdumpar för att kontrollera din CSS.
En riktigt cool hemsida är browserlab.adobe.com.
Detta är en kostnadsfri tjänst tas ut av Adobe.
Och vad de gör är att de kan ta skärmdumpar av din webbplats
kör under olika förhållanden - som att springa i olika webbläsare,
körs under olika plattformar - och visar dig hur de ser ut.
Bara för att visa dig vad jag menar här, skapade jag en hemsida förra året som heter Life At Harvard,
och vad jag försökte göra - jag försökte göra my.harvard bättre.
För om du var här förra året, gjorde my.harvard ser inte som det ser ut nu.
Det ser lite äckligt.
Men nu ser det mycket bättre.
Min genomförandet var inte så bra längre, men i alla fall,
du vet, jag försökte lägga - (ohörbart) många vad -
och det ser ut - det ser väldigt bra ut på min dator.
Och sedan, kanske om jag hade haft mer tid skulle jag ha gått på till webbläsaren labb,
och jag skulle ha tittat på, väl, hur det ser ut i Chrome 18 på Windows.
Jag skulle rulla ner och jag skulle se - oh no! Titta på meddelanden rutan.
Min text överfulla. Så, det är illa, va?
Om en användare använder Chrome på Windows och kommer till min hemsida,
som ser genast mycket oprofessionellt.
Så ska jag gå in i min CSS och ta reda på vilken del av mitt CSS bryter här.
Varför är det inte visas korrekt och fixa det så att alla användare kan se samma webbplats
och vara lika glad.
>> Och slutligen, ja, webbläsare skärmdumpar är trevligt för att testa din CSS,
men hur är din JavaScript?
Vad händer om du har några komplicerade skript som körs?
Tja, kan du alltid göra virtualisering.
Om du har en Mac kan du använda Bootcamp eller VMWare att virtualisera kanske en kopia av
Windows och använda Internet Explorer där.
Eller så kan du gå vidare till något som Spoon.net, som tyvärr bara fungerar på PC.
Men vad de gör är väldigt cool.
De virtualisera programvara för dig så att du kan köra olika versioner av IE, till exempel.
Du kan köra olika versioner av Firefox.
Du kan köra olika versioner av Safari och testa alla dina webbplatser där.
Tyvärr är de inte gratis.
Det är en betaltjänst, så det finns alltid sorts här -
det finns alltid sorts denna avvägning mellan, ja, jag kommer att göra min hemsida ser bra ut.
I så fall kanske jag måste betala för vissa tjänster för att hjälpa mig att göra det.
Eventuella frågor på denna punkt om något som vi pratade om?
Awesome. Okej.
>> Nu har vi fler saker att prata om.
Hur fel?
Hur tror du att din webbplats kommer att fungera även när
det sker något dåligt?
Kanske du inte har en sida som heter food.php.
Men jag, jag går till din webbplats och jag försöker komma åt food.php.
Ska du bara för att visa mig att vita sidan som säger 404 - Filen hittades inte?
Eller kommer ni att säga, "Ja, jag är ledsen att jag inte kunde hitta det för dig,
men kanske här är några andra resurser som hjälper dig att söka efter vad du behöver. "
Andra fel - så är det här som kallas HTTP-fel som är bara några felkoder
att din server kan ha skickats tillbaka till webbläsaren i händelse av något dåligt händer.
400 - Bad Request. 401 - Otillåten.
403 är typ av vanligt när du har en katalog som inte är tänkt att nås
av användaren, men användaren försöker ändå.
Och 500 - Internal Server Error - som vanligtvis händer när du har något
riktigt dåligt händer med din PHP-kod.
Men i alla fall, dessa typer av webbläsare - gör dessa typer av fel händer.
>> Så, hur gör du se till att du graciöst hanterar dessa fel
och se till att användaren inte bara sorts hänger där?
Här kommer. Htaccess.
Nu,. Htaccess är något som fungerar på Apache-servrar,
något som fungerar och fungerar på några andra servrar också.
Detta är bara ett sätt för dig att konfigurera servern så att
du kan göra det göra vad du vill att den ska göra.
Vissa saker du kan göra. Du kan kontrollera dina cacheinställningar.
Kanske finns det en viss sida på din webbplats som du ser till att användaren
åter hämta varje gång användaren kommer och besöker din webbplats.
Eller kanske du har någon URL som är som yoursite.com / test / html / pages / hello.html
och du vill bara att vara yourname.com / hello -. väl, kan du använda htaccess
att omdirigera en webbsida till en annan.
Du kan också använda den för att göra autentisering.
Kanske finns det vissa delar av din webbplats som du behöver för att använda ett annat lösenord.
Du kan blockera vissa IP-adresser, blockera vissa domäner.
Kanske du bara verkligen inte gillar Harvard studenter använder din webbplats.
Tja, har du möjlighet att blockera alla Harvard IP-adresser.
>> Slutligen, kan du behandla saker - du kan skriva viss kod för att göra din server
behandla som. zhao eller. ditt namn eller. hello sidor som PHP-kod.
Kanske det kommer att vara användbar. Kanske det inte kommer att bli.
Och slutligen, kan du använda den för att hantera fel svar.
Vad menar jag med det?
Om du bara lägga koden så här - ErrorDocument 404 och sedan hänvisa dem till någon
fel sida, kan du vara säker på att användaren inte bara ser det riktigt, riktigt ful
404 och visa dem något trevligt.
>> Låt oss verkligen ta en titt på hur vi kan göra det med din Pset 7.
Här är jag i min apparat.
Jag kommer att öppna Chrome, och sedan ska jag försöka komma åt en sida
som inte existerar på CS50 Finance.
Så, lokal värd - cats.php--så, märker att jag skapade ett fel dokument
som säger, "Canz inte hitta z sida!"
Den har en mycket sorglig katt på det.
Om du går på Twitter, om du går på någon av dessa andra platser,
du inte kan hitta en sida, försöker de oftast att visa en gullig bild
så att du inte är alltför besviken.
Du kan också ha något som är mer professionell som säger,
Ja, jag är ledsen att jag inte kunde hitta den sidan, men kanske här finns en sökruta.
Eller kanske här är några länkar som hjälper dig att hitta den länk som du vill.
Så, hur gör jag detta? Hur är det ens möjligt?
Om vi ​​går in i vår terminal här -
Jag kommer bara att zooma in lite -
märker att jag har en ny sida.
Inuti min HTML katalog den heter - du kan inte se det -
det kallas error.php.
Och error.php är bara en fil som jag gjorde
som visar att själva sidan.
Jag kan visa dig vad error.php är.
Det är precis den här sidan.
Den säger, "Åh nej! Canz inte hitta z sida!"
Och, om du vill se - så, märker att htaccess sortens är ett konstigt namn..
Det börjar med en punkt, vilket innebär att det är en systemfil.
Det är en dold fil som normalt inte visas.
Om du gör ls-a, kan du se alla dolda filer i en viss katalog,
och faktiskt, ser du. htaccess är en av dem.
Låt oss gå vidare och öppna htaccess. -
med gedit -
Boom! Allt jag har är en linje i det - Fel dokument för 404 fel
som också är känd som fil-inte-fel som hittats.
Låt oss omdirigera dem till något som kallas error.php.
Du kan ha roliga saker som canz inte hitta z sida!
Och det finns också mycket coola saker som du kan göra med. Htaccess.
Om du vill se mer. Htaccess magi,
Detta är en väldigt cool hemsida att gå till - det kallas javascriptkit.com/howto/htaccess.shtml--
Om du vill utföra mer server magi. Och det kan vara väldigt roligt.
>> Puh! Okej! Mer söta bilder.
Detta är en kille som gör armhävningar, och hans katt försöker hjälpa. Jag tycker det är väldigt gulligt.
Tyvärr har jag inte en katt som.
Okej. Så, vi har pratat om. Htaccess.
Vi har pratat om felhantering.
Vi har pratat om webbhotell, domännamn.
Vi har pratat om kompatibilitet med olika webbläsare.
Så hur ser vi till att din webbplats faktiskt utför?
Hur kan vi se till att om jag går till din webbplats
Jag kan se din sida inom några sekunder?
En av de saker som jag tror att folk bara sorts glömma
är bildoptimering.
Låt oss säga att du ville lägga in en bild på din webbplats
och det är 2 MG stor.
Det kan vara bra för oss eftersom vi är vid Harvard,
och vi har en mycket snabb Internetanslutning.
Men tänk någon i Kina. Föreställ någon i Indien.
föreställa någon kanske i lantliga Kansas som kanske inte har samma sorts
bredband som vi har.
Om du har en 2 MB bild på din webbplats och användaren försöker komma åt det,
det kommer att ta dem en riktigt lång tid att ladda ner.
Så, om du inte behöver den sortens upplösning,
då kan du ändra storlek på din bild med något som Adobe Photo Shop.
Det finns ofta ett alternativ som heter säker för webb och enheter,
och vad den gör är det remsor ut all onödig information
och liksom komprimerar filen till en liten bildstorlek så att du kan
lägga den på din hemsida, och alla användare som försöker ladda ned den sidan
kommer att hämta en mindre version av din bild.
Om du inte har Adobe Photo Shop
webresizer.com är också en annan resurs där du kan mata in din bild
och det kommer att spotta ut exakt samma bild,
men det kommer att bli något liknande 3 gånger mindre.
Så det är mycket användbar för användarna.
>> En annan sak som du kan göra är minify koden.
Om vi ​​tar en titt på Google.com,
ser du att det inte är typ av samma HTML och CSS som vi är vana vid.
Bara att titta på källkoden här.
Om jag bara rulla ned - wow, ser det ganska motbjudande.
Detta skulle få en nolla på stil.
Om du kodat detta för din Pset, kommer du att få en nolla på din stil.
Detta har inget mellanrum. Namnen ser riktigt kryptiskt.
Det handlar verkligen upprörande.
Och manuset till slutet i kroppen - den sista HTML -
de är alla tillsammans - allt smushed tillsammans.
Varför gör de det?
De minified sin kod.
Observera att detta dokument kommer att vara mycket mindre
för mig att ladda ner än något med tomrum,
än något med riktigt långa variabelnamn.
Om du minimerar din kod du remsa ut alla tomrum.
Naturligtvis bryr din webbläsare inte om du har något vitt utrymme i din kod.
Du strippa ut, nu kan jag ladda ner en mindre fil -
nu filen - det dokument som vi ska hämta har en mindre filstorlek,
det kommer att bli snabbare för mig att ladda ner, och det är nyttigt.
Om du arbetar med webbsidor och du lanserar en webbplats,
det är nästan alltid bra att minimerar din kod.
En annan anledning till varför det kan vara bra är kanske du inte vill att andra ska använda din kod.
Kanske du inte vill att andra ska använda din CSS.
Du vet om du verkligen ville vara snål med det,
då kan du också minify din kod, och det skulle bli svårare för mig att stjäla den
eftersom jag har ingen aning om vad som händer.
Du kan också gå till webbplatser som minify.avivo.si.
Tjänster som denna på nätet hjälper dig minify din kod så att du inte behöver göra det för hand.
Definitivt inte göra det för hand.
>> Okej. Nu talar om manus.
Kanske i din PHP-kod finns det något som du inte behöver göra.
Kanske finns det extra slingor i det.
Vi pratade om koden design CS50.
Även om du kodar i C om du har - om du gör extra arbete
att du inte behöver göra, ja, det kommer att sakta ner dina skript på din webbplats,
och detta är särskilt viktigt för webbplatser eftersom användarna numera är väldigt otålig.
Om du gör onödigt arbete, det kommer att ta dem längre
att få den information som de vill, och de kommer att bli mycket olycklig.
Slutligen, kan du optimera dina databastabeller.
Kom ihåg att vi pratade om index.
De är inte bara bra för att se till att du har en rad som är unik.
De är också bra för att se till att databasen fungerar snabbt.
Om du vill läsa på som går till MySQL-dokumentationen,
eller så kan du titta på - ja, hur gör jag optimera min databastabell?
Hur kan jag vara säker på att jag har index som hjälper mig att få den information snabbare?
>> Det finns också små knep som du kan använda som caching.
Om du har PHP - om du har en blogg, till exempel,
och du har - och den drivs av PHP eller något annat språk -
du kan cache din blogg på låt oss säga 50-minuters intervall så att du kan tjäna statiska sidor
eller statisk HTML till besökarna till din webbplats.
På så sätt användarna inte behöver köra PHP script varje gång,
och kanske som kommer att vara snabbare för dem att få tillgång till denna information.
>> Och slutligen, kan du använda något som CDN.
Observera att när du hämtar en Pset,
du alltid gå till CDN.CS50.net. Varför är det?
CS50 använder också ungefär som ett CDN - ett nätverk distribution av innehåll -
vilket betyder bara att det är ett gäng servrar kanske någonstans runt om i världen
att hjälpa tjäna dina sidor för besökarna.
Om dina besökare är att få en sida från en server som är närmare dem geografiskt,
så mest troligt dina besökare kommer att få den filen mycket snabbare.
Det finns också källor på nätet som hjälper dig att göra det.
En av dem är CloudFlare. De erbjuder en gratis CDN tjänst.
Om du har stora filer som du tjänar på dina användare,
då kanske det är bättre att sätta dem på ett CDN så att de kan få dem snabbare.
>> Den sista frågan för dagen är sökmotoroptimering.
Vad är sökmotoroptimering?
Det är att se till att sökmotorer som Google eller Bing eller Yahoo
kan gå vidare till din webbplats och söka igenom din webbplats och indexera din webbplats och när
Jag, till exempel, gå till Google.com och jag försöker att söka efter något,
då din webbplats kommer att dyka upp.
Hur gör du säker på att din webbplats är en av de 10?
För som vi alla vet, om du söker efter något på Google
och det är inte på topp 10 som du troligtvis inte kommer att se i nästa 10.
Detta är en slags ämne som är höljt i dunkel.
Det finns en hel del hype där ute på Internet.
Det finns en hel del vidskepelse om om du gör x då Google kommer att gilla dig bättre.
Om du y då Google kommer att gilla dig bättre.
Det är nog bättre att titta in i sökandet jättens handlingar själv.
>> Detta är ett av de dokument på Google som visar dig exakt hur du optimerar din webbplats
så att Google kan komma och indexera det mycket snyggt.
Du behöver inte kopiera in denna URL eftersom denna presentation kommer att
vara online ändå.
Om du tittar på detta och du läser detta finns det några mycket användbara tips där.
Google berättar - om du verkligen vill att din webbplats ska indexeras väl
så ska du göra alla dessa saker.
>> En annan sak som sökmotorerna verkligen gillar är färskt innehåll.
Om du har innehåll som är uppdaterat väldigt regelbundet
då sökmotorer säga, ooh, jag gillar din sida.
Jag kommer att gå till din webbplats så ofta.
Jag ska indexera en hel del av dina sidor.
Om du har nytt innehåll då du är mer benägna att visa upp -
du är mer sannolikt att vara mer relevant.
Du är mer sannolikt att vara mer uppdaterad,
och sökmotorer är mer benägna att sätta din webbplats framför andra.
>> Djupa länkar är också viktigt.
Om du ville verkligen din webbplats för att se bra ut i en sökmotors ögon
har en massa andra webbplatser kopplade till den och kopplat djupt in din hemsida.
Inte bara länka till din hemsida.
Länk till kanske yourname.com / något / något / something.php.
Det - en sökmotor - medel, wow, de har verkligen intressant innehåll
att någon annan länkning så djupt in i deras webbplats som jag borde verkligen, verkligen
lägga mer vikt på att webbplatsens sidor.
>> Om du har korrekta sidtitlar, om du inte har några fel som är bra eftersom
Om en sökmotor försöker att besöka din webbplats, och det blir ett fel,
Det kommer förmodligen att ge upp mycket, mycket snart.
Och slutligen, vill du ha en snabb laddningstid eftersom sökmotorer -
precis som människor - inte ha mycket tålamod för långsamma webbplatser.
Detta är ett sätt för dig att se till att du visar upp högre i
sökmotor sökfrågor och förhoppningsvis därigenom få mer trafik.
För efter allt du har spenderat all denna tid att utveckla din webbplats.
Du tillbringade hela denna tid lansera denna hemsida på nätet.
Du vill vara säker på att du har massor av användare som faktiskt ser ditt innehåll.
>> Andra bra resurser att använda.
Google Webmaster Tools är något att titta in till.
Detta hjälper bara dig att se - Google inte indexerar min plats.
Vilka typer av fel är det möter?
Hur många sidor har det indexeras?
Vad betyder det tycker är det viktigaste innehållet på min sida?
Kanske det är inte vad jag vill att det ska vara.
Kanske jag måste ändra min hemsida lite så att det återspeglas bättre
vad min hemsida egentligen handlar om.
Google Analytics är ett riktigt coolt verktyg.
Du kan lägga till en liten bit av JavaScript på dina sidor.
Och sedan efteråt kan du gå till Google Analytics, och det kommer att spåra
dina besökare demografi och din webbplats tillväxt.
Det kommer att berätta exakt hur många besökare besöker din webbplats
inom en viss dag, inom en viss timme, inom en viss vecka.
Hur många besökare från Kina? Hur många besökare från Antarktis -
du får till din webbplats.
det kan vara något coolt att se eller kan det även vara bra
eftersom du försöker rikta en viss grupp.
Kanske du försöker rikta tonåringar med din webbplats, och du ser att
flesta besökare till din webbplats är kanske 30 - till 40-åringar,
då kanske antingen du har ett problem eller du kan bara säga,
bra, då kanske jag ska bara ändra min hemsida fokus så att
Jag fokuserar mer på den åldersgruppen.
>> Google Apps - om du ville ha typ av e-post med ditt domännamn -
kanske något liknande yourname@yourname.com--
du kan använda Gmail-adresser - du kan använda Gmail
och Google Apps är ett sätt att göra det.
Du kan ställa in specifika e-postadresser som är specifika för ditt domännamn
istället of@gmail.com.
>> Och slutligen, det finns webbutvecklare förlängningar och tillägg - för Chrome,
för Firefox, för andra webbläsare - som gör att du kan gå in och inspektera
CSS, inspektera JavaScript, se exakt vad som är fel med din JavaScript-skript,
och kanske det kommer att vara till nytta för din de-buggning ändamål, för dig att ta reda på -
Tja, varför inte min hemsida visas korrekt i den här webbläsaren?
>> Och slutligen, om du ville veta mer om alla dessa frågor -
om du ville veta mer om HTML och CSS och Javascript -
för efter allt, lärde vi bara en liten bit -
du kan gå webbplatser som W3Schools.com att leta efter mer resurser.
De har mycket fina tutorials om hur jag gör x, eller vad betyder y detta?
Om du vill lära dig mer om dessa språk kan du helt enkelt gå hit.
>> Okej. Jag tror att jag ville lämna de sista minuterna av detta för frågor,
så finns det några frågor om någonting som vi pratade om?
[Publiken] Vilka saker är på W3Schools och hur är det täckt?
[Yuechen Zhao] Vilka saker?
Så, är en av de allra största saker som jag använder mycket deras referenser.
Deras referenser detalj, till exempel för CSS -
vad detta betyder eller om du ville ändra bakgrunden på en sida -
Hur gör du det?
Vilka webbläsare stöder det kommandot? Saker som.
Och då de också bara har väldigt fina tutorials på HTML, på PHP, på JavaScript,
på MySQL, på alla möjliga olika ämnen.
De har fina tutorials. De lär dig hur man gör saker.
Det är trevligt att kunna gå och lära sig mer om dessa frågor.
>> [Publiken] HTML 5 är ännu inte kompatibel med alla webbläsare där ute.
Skulle du rekommendera bara borta från det på grund av kompatibilitetsproblem?
Hur skulle du hantera det?
[Yuechen Zhao] Ja, så är frågan HTML5 är fortfarande en baby standard.
Det är inte riktigt stöds av många webbläsare, så bör vi undvika det?
Jag tror att förra året hade jag varit en mycket stor förespråkare av, låt oss undvika HTML5
eftersom det fortfarande - det är fortfarande mycket nytt och i själva verket HTML5 standarden
har inte slutförts ännu.
Och så, det är verkligen ingen HTML5-standarden.
Men jag tror, ​​särskilt om du designar en hemsida,
det skulle vara bättre om du bara gå med HTML5, eftersom det är typ av kommer att vara framtiden,
och om du vill att din webbplats för att vara framtidssäkrad och du vill att din webbplats för att arbeta
i framtida webbläsare, kan det vara bättre att börja bygga något för framtiden
än tidigare, och dessutom bara på grund av det faktum att HTML5 är verkligen inte så annorlunda
från HTML4 eller XHTML.
Om du använder HTML5, det normalt kommer att fungera i de flesta webbläsare.
Du behöver bara sortera om att gå in och se med dessa skärmdumpar
och se med att gå in på dessa webbplatser själv.
Men mest troligt att det kommer att fungera om du använder mycket specifika funktioner till HTML5.
Lägg märke till också att för CS50 - till exempel för videospelare som vi använder -
det använder HTML5 och HTML5-video för att visa föreläsningarna.
Men om du har en riktigt gammal webbläsare, så det kommer att falla tillbaka på Flash.
Så, det är också något annat -
ha en reservlösning för när du bara vet att webbläsaren inte kommer att hantera
vad du vill att den ska hantera.
>> Övriga frågor?
Något som vi pratade om.
Okej. Då tror jag det är om det för mig.
Jag tror att det är det.
(Applåder)
Cool.
[CS50.TV]