Bună. Astăzi vom scrie în sfârșit un cod, și
vă voi conduce prin asta arătându/vă cum puteți folosi un editor.
Una din cea mai mare greșeală pe care am văzut că o fac mulți dintree studenții mei este că ascultă
mult prea atent ceea ce spun, în loc să se arunce și să
înceapă să codeze singuri.
Deci în timp ce eu vă încurajeș să vă așezați și să priviți ceea ce voi face acum
sper puțin să vă așezați și să codați împreună cu mine.
Primul pas este să creați și să editați fișierele
Una dintre cele mai mari capcane pe care o veți întâlni este că
vă veți salva fișierele peste tot, și nu veți mai putea să le găsiți mai târziu
Deci stabiliți cum vă veți organiza fișierele.
Cum vă veți denumi folderul?
Unde îl veți pune?
În al doilea rând, va trebui să vă decideți la o denumire convențională.
Acesta este doar un mod frumos de a spune să vă decideți cum vă veți denumi fișierele.
Deși multă lume folosește Mac și puteți să folosiți spații libere în denumirea fișierelor
nu este ceva ce vreți să faceți când scrieți coduri.
Așa că stabiliți dacă veți avea două cuvinte și vreți să le puneți împreună
veți folosi underscor-urile să le uniți, sau folosiți ceva ce noi numim Camel Case
cînd scrieți cu literă mare litera de început a fiecărui cuvânt.
Doar țineți minte, niciodată nu folosiți spații libere
și fiți foarte consistenți în scrierea cu litere mari, dacă o veți folosi.
În ultimul rând trebuie să vă decideți la un editor.
Dacă folosiți un aparat Windows, Notepad este deja inclus în el.
Puteți deasemenea lua în considerare să folosiți Notepad++ sau Sublime
Dacă folosiți un Mac, editorul prestabilit este TextEdit,
deși mulți oameni folosesc TextWrangler.
Voi folosi Sublime pe pracursul cursului, dar azi
vă voi arăta exemple cum să editați în Notepad si în TextEdit
Deci, pentru a începe haideți să revizuim rapid câțiva pași pe care îi vom face
unii dintre ei în mod repetat.
Veți începe rpin a deschide editorul și apoi vă veți slava fișierul,
și ceva conținut, salvați fișierul din nou și deschideți-l în browserul vostru
Vreau să vorbesc cu voi pe pracursul unui scurt exemplu
voi folosi Sublime pentru a face asta.
Dar nu vă îngrijorați, voi merge mai departe și
vă voi arăta și alte metode prion care să faceți asta.
Deci am adus editorul meu Sublime aici, un fișier drăguț, negru.
Voi începe prin mergerea la fișier.
și voi slava.
Îl voi denumi simplu firstpage.html.
Acum unul dintre lucrurile pe care trebuie să le decideți imediat este unde
veți slava asta.
Sper cați decis asta înainte de a începe să lucrați.
Îl voi păstra pe al meu într-un folder numit webpages pe care l-am pus pe desktop.
Dar puteți alege orice aici, sau puteți chiar
să creați un nou folder, dacă faceți click în laterală aici.
Ceea ce nu veți vrea să faceți este să vă slavați toate codurile pe desktop.
Haideți să salvăm.
Și acum, chiar dacă de multe ori vă voi forța să vă așezați și
să mă priviți cum tastez pe ecran, de data aceasta, doar ca să salvam timpul
voi merge mai departe și voi trișa, voi copia câteva coduri pe care le-am scris deja.
După cum puteți vedea, am tipul documentului, secțiunea de titlu și cuprinsul.
În titlu am inclus codul și titlul.
În cuprins doar vom spune Salut.
Am mers mai departe și am salvat folosind Ctrl+S.
Puteți întotdeauna să faceți File-Save, dar mi se pare Ctrl+S mult mai rapid.
Și pentru toate editoarele pe care le folosiți există aceste mici chei ajutătoare,
să vă dați seama dacă ați schimbat sau nu ceva.
dacă vă uitrați chair acum la firstpage.html, ceea ce săar putea să fie greu
pentru voi să vedeți, dacă ar fi să intrați și să schimbați ceva.
De fapt veți avea un mic cerc care vă va anunaț caă nu ați slavat
de ceva vreme.
Deci, am mers mai departe, am creat un conținut și acum este timpul să merg mai departe să îmi deschid pagina.
O cale să fac asta este merg aici în folderul meu.
Si o, aici este firstpage.HTML
Pentru mine, există o mică iconiță Chrome în laterală.
Pentru voi, s-ar putea să fie un browser siferit.
Voi merge mai departe și voi face click pe el și să dechid FirstPage, și am reușit.
Nu pot să nu vă spun că de cele mai multe ori când veți tasta ceva la început,
de fapt nu va merge.
Eu, din fericire, am puterea de a edita.
Nu aveți nicio idee că de fapt am avut nevoie de câteva încercări să fac fișierul să meargă,
pentru că încurcam câteva lucruri.
Pe parcurul întregului curs
vă voi arăta locurile unde ați putea avea probleme.
Să sperăm că nu veți avea, dar dacă se va întâmpla, toate sunt foarte simplu de rezolvat.
Una dintre cele mai comune probleme este ca atunci când faci click dreapta pe fișier
în loc să se deschidă frumos în browser, se deschide editorul.
Dacă vreți să reparați asta, tot ceea ce trebuie să faceți este să dați click dreapta pe fișier și
să selectați Open With - deschide cu.
Altă problemă care se întâmplă destul de des este că atunci când deschideți fișierul, în loc să
vedeți o pagină web frumos formatată veți vedea de fapt tote etichetele.
Când se întâmplă asta trebuie să verificați extensia fișierului și
să vă asigurați că este .html, și nu ceva de genul .text sau .rtf.
Altă problemă care se întâmplă destul de des este atunci când schimbați codul, dar
pagina voastră arată exact la fel.
Există două motive din cauză cărora se poate întâmpla asta
Unul este că are trebui să faceți ceva care se numește reîmprospătarea browserului.
Asta înseamnă să uploadați conținuturile.
Un alt lucru care se întâmplă destul de des este că ați uitat să verificați
numele fișirului.
Permiteți-mi să vă arăt un exemplu pentru aceasta.
Deci, haideți să ne întoarcem la fișierul nostru original.
După cum puteți vedeam am Hello World scris aici.
Aceasta este foarte științificic sa scriu așa și
din moment ce vreau să par mai normală voi schimba asta în Hello Everybody.
Voi merge mai departe și îmi voi salva fișierul.
Gata.
Când mă duc la pagina mea web, scrie tot Hello World.
Nu s-a schimbat și sunt destul de supărata pentru asta.
Deci, acum mi-am adus aminte că este necesar deseori să reîmprospătez pagina.
Sunt câteva moduri în care puteți face asta,
puteți să mergeți la acea mică săgeată circulară și să dați reîncărcare.
Puteți să dați click dreapta și click pe Reload sau puteți să mergeți la View
Puteți deasemena să o faceți prin bara de instrumente de sus
deci, voi merege mai departe și voi reîmprospăta chiar aici.
Și puteți vedea că acum am Hello Everybody.
O altă problemă pe care am menționată este că uneori oamenii își schimbă numele fișierului.
Deci probabil nu mai lucrați pe FirstPage.
Aţi decis că veţi salva asta ca Fişier > Salvare ca pagina a doua.
Am salvat.
Voi merge aici şi voi reîmprospăta fişierul.
Salut, tuturor!
Deci, nu s-a întâmpla nimic.
Veţi vedea că asta se întâmplă din nou şi din nou şi din nou.
Când aveţi multe fişiere, toate în acelaşi timp,
trebuie să vă asiguraţi că cel la care priviţi în browserul vostru este acelaşi
cu cel în care tastaţi.
Pentru că am schimbat numele fişierului meu
trebuie să îmi aduc aminte să îl schimb şi în bara URL.
Boom
O altă problemă care apare destul de des este această idee că aveţi
cee ce numim noi, caractere ciudate.
Unul dintre principalele motive pentru
care se întâmplă asta este vechiul meu favorit, copiere şi lipire.
De fiecare dată când vă dau un cod şi vă uitaţi la cu PowerPoint,
problema este că atunci când copiaţi şi lipiţi, multe dintre caractere nu se traduc
exact în modul în care speraţi voi să o facă, şi veţi avea ceea ce noi numim caractere ciudate
Vinovatul numărul unu sunt ghilimelele.
Deci, de fiecare dată când tastaţi şi aveţi o problemă ciudată la care
nu vă aşteptaţi, întorceţi-vă şi tastaţi codul.
Deci v-am arătat cum să creaţi şi editaţi un fişier în Sublime.
Dar vreau să fiu sigură că toată lumea are o şansă să vadă
cum pot crea fişiere folosind editori i pe care îi au în propriile calculatoare.
Deci vă voi arăta de asemenea un exemplu în TextEdit şi în Notepad.
Sper că atunci când priviţi aceste exem,, aveţi computerul pornit
şi veţi tasta împreună cu mine.
Puneți pauză, opriți lucrurile, nu mergeți mai departe în video până când
vă simțiți că sunteți la puctul unde am ajuns eu.
Salut tuturor!
Acum vom merge mai departe și vom face un fișier cu TextEdit.
Și dacă aș vrea să fiu rea aș merge mai departe și
v-aș arătă un exemplu foarte simplu și rapid cum să faceți un fișier în TextEdit.
Dar în schimb, voi fi foarte sinceră cu tine și voi admite că mi-a luat
în jur de 15-20 minute să îmi dau seama cum să fac un fișier foarte simplu în TextEdit.
Deci, în primul rând haideți să vă arăt ce am facut greșit.
Oh, si ca sa stiti, in dreapta este tot termenul
Voi merge mai departe şi voi copia codul într-o pagină foarte simplă.
OK, haideţi să scăpăm de asta.
Gata. Avem titlul şi conţinutul.
Deci, puteţi tasta asta în timp ce mergem mai departe, sau puteţi aştepta.
Este timpul să salvez fişierul.
Şi ceea ce trebuie să fac este să mă asigur că salvez în folderul potrivit
cu numele fişierului.
Voi merge mai departe şi voi numi asta FirstPage şi
voi merge aici jos şi vreau să mă asigur că am salvat ca o pagină web.
Una dintre opţiuni este .html, aşa că voi face click pe ea.
Ştiu că am firstpage.html,
este în folderul care vreau şi chiar gred că este bine să merg mai departe.
Aşa că voi merge mai departe şi o voi slava.
Acum, voi merge aici folderul cu paginile web, şi îl deschid.
Şi se va deschide în Chrome.
Aşa că să vedem cum va merge.
Nu este ceea ce speram când am tastat acest segment,
şi mi-a luat destul de mult timp să îmi dau seama ceea ce se întâmplă.
Primul lucru pe care l-am verificat, lasa-ţi-mă să închid asta,
este că am vrut să mă asigur că extensia fişierului meu este într-adevăr .html.
Şi aşa era, nu era .txt sau .rtf.
Următorul lucru pe care l-am făcut
a fost să verific că toate ghilimelele erau cum trebuie.
Aşa că să mergem mai departe şi să le punem din nou, pentru că, dacă vă reamintiţi,
întotdeauna vă spun că copierea şi lipirea pot uneori să vă dea ghlimele greşite.
Deci ne putem întoarce din nou.
Încă nu avem nororc.
Dacă veţi folosi TextEdit, rebuie să mergeţi şi să
faceţi unele modificări programului TextEdit.
Nu are nici o legătură cu ceea ce aţi tastat.
Este o problemă la programul TextEdit.
Deci voi merge mai departe, voi copia asta pentru cazul în care o pierd, şi şterg.
Voi merge la TextEdit, selectey Preferences, şi
puteţi vedea că avem două opţiuni.
New Dcouments şi Open and Save.
Primul lucru pe care îl voi spune este
oricând voi avea un document nou, aş vrea să fie în format text simplu.
Nu rtf, sau format text îmbogăţit, doar text simplu.
Următorul lucru pe care vreţi să îl faceţi este să mergeţi aici să îl deschideţi.
Vedeţi că fişierul HTML este un cod HTML?
Vom merge mai departe şi vom face click pe asta.
Şi în ultimul rând cel mai important lucru este când vă salvaţi fişierul,
vreţi să îl salvaţi ca utf8.
Voi pune pauză aici pentru o secundă.
doar o secundă, în timp ce vă uitaţi la meniul vostru din TextEdit.
Vreţi să vă asiguraţi că aveţi aceste căsuţe verificate şi
că aţi schimbat în codul utf8.
Bine?
Dacă aţi amestecat lucrurile, mergeţi mai jos şi refaceţi toate setările şi încercaţi din nou.
Voi închide asta.
Voi merge mai departe şi voi da New, voi copia codul.
Oh, este foarte mic pentru voi, dar este ok.
Faceţi File şi Save.
Haideţi să îi spunem FirstPage2.html.
Veţi vedea imediat că spune, vreţi să salvaţi folosind extensia HTML sau
sau text?
Şi voi spune să folosească HTML.
Înainte de a da click vreau să arăt că aici
arată că va salva ca unicod utf.8.
Pot să scap de această avertizare, dacă vreau, prin deselectare,
dacă nu este prevăzută , folosiţi .txt.
Deci vom folosi HTML.
Haideţi să mergem aici, să ne încrucişăm degetele şi să sperăm la ce e mai bine.
Şi acum am o pagină reuşită.
Deci dacă veţi folosi TextEdit, nu aveţi de făcut foarte multe,
în afară de prima dată când stabiliţi setările.
Asiguraţi-vă că mergeţi la preferences.
De acolo pot acum să intru, să fac schimbări, am reuşit.
Salvaţi şi reîmprospătaţi.
Sper că acum puteţi să salaţi şi să editaţi un fişier cu succes.
Să spunem că folosiţi un calculator să creaţi fişiere.
Ce vreţi să faceţi este, probabil, să folosiţi Notepad prima data din moment ce
este varianta gratuită a editorului care este deja instalata pe dispozitivul vostru.
Primul lucru pe care l+am făcut,
a fost să fac un folder chiar pe ecran unde pot păstra fişierele.
Ştiu că este mic, voi probabil nu puteţi să îl vedeţi, dar se numeşte web pages.
Dacă nu ştiţi cum să faceţi un folder, doar ca să ştiţi,
puteţi să daţi click dreapta pe ecran, mergeţi la New şi Create a folder.
O dată ce aţi creat folderul unde vreţi să vă salvaţi fişierele
eu sunt chiar în el, mergeţi mai departe şi spuneţi File, Save,
şi voi numi asta firstpage.html.
Este foarte, foarte important să includeţi .html.
Dacă nu includeţi asta,
computerul va crede că lucraţi la orice alt tip vechi de fişier.
Voi veni aici si voi schimba extensia din documente text in toate fișierele.
Salvăm.
Apare un dialog care ne anunță ca fișierul există deja. Vom face click pe butonul Ok.
Acum vom introduce niște conținut.
Chiar dacă dvs. veți fi nevoit să scrieți codul eu voi sări
peste aceasta etapa și îmi voi introduce conținutul aici prin copiere/lipire.
Aici, avem tipul de document, limba folosită este limba Engleză,
metoda de codare este UTF-8, titlul si conținutul meu.
Ca să fim siguri vom pune din nou ghilimelele aici.
Ghilimelele îmi dau întotdeauna emoții când le introduc prin lipire. Am senzația ca poate am introdus
un caracter pe care editorul meu nu îl va recunoaște.
Acum ca sunt sigură că am tot ce mi-am dorit in fișier
îl voi salva din nou,
voi merge in folderul meu si voi face clic pe PrimaPagina.
Și asta e!
Este destul de util ca de fiecare dată când aveți de gând să modificați pagina,
și aveți spațiu suficient să lăsați ambele ferestre deschise.
Faceți modificările.
”Foarte bine. Am un fișier”.
Salvăm fișierul din nou și
îl redeschidem.
Bună treabă.
Ați creat un fișier folosind Notepad.