დევიდ ჯ Malan ყველა უფლება.
ჩვენ დავბრუნდით.
ასე რომ, მიზანი ამ დასკვნით სხდომაზე დანერგვა რამდენიმე ცნებები
არამედ, რათა ყველას ეძლევა სახის მონაკვეთი თქვენი თითების
და რეალურად რაღაც პატარა პრაქტიკული.
მიზანი არ არის, რომ გახდეს ჩვენთვის ყველა ვებ დეველოპერები
ნებისმიერი საშუალებით, მაგრამ რეალურად მხოლოდ გადმოგცეთ გემოვნების ზოგიერთი
ფუნდამენტური აშენებს რა გადადის ვებ პროგრამირების და დღეს ვებ
განვითარების, ისე სტატიკური მხარეს რამ
ლოგიკას არ ექვემდებარება, არ პროგრამირების ენის, მხოლოდ სტატიკური შიგთავსი.
და ეს საშუალებას გვაძლევს რეალურად ნახოთ, თუ რას სერვერზე არის,
თუ რა არის HTML ფაილი არის, თუ რა ეს არის HTTP რეალურად ემსახურება.
მაგრამ, სანამ ჩვენ ჩაყვინთვის, ნებისმიერი რეტროსპექტივა კითხვები cloud computing
ან უსაფრთხოების ან არაფერი შორის?
>> არ არის?
ყველა უფლება, კარგად, მოდით ამისათვის, მხოლოდ იმ შემთხვევაში,
ხელმოწერის პროცესში up for რაღაც რამდენიმე წუთში.
ჩვენ ნება მას ამის გაკეთება ფონზე.
წავიდეთ წინ, თუ შეიძლება, ამ URL აქ c9.io.
ეს არის მესამე მხარის service-- პლატფორმა მომსახურება, თუ will--
რომ აპირებს გიწვევთ იწერთ ანგარიში,
და ის აპირებს, რათა თითოეული თქვენგანის ანგარიშის ე.წ. cloud
სხვისი ინფრასტრუქტურა, კომპანია მოუწოდა Cloud9.
მაგრამ რა ლამაზი ეს არის, რომ ისინი მოგცემთ
დაახლოების თაობაზე ნამდვილი სამყაროს განვითარების
გარემოს, თუმცა ამ ღრუბელი და ბრაუზერში,
და ჩვენ გამოიყენოს ეს რეალურად ექსპერიმენტი ცოტა დღეს.
და მაშინ წავიდეთ წინ და უბრალოდ ნავიგაცია თქვენი გზა რეგისტრაციის პროცესს
თუ შეიძლება.
ასე რომ, ჩვენ არ უნდა გამოიყენოს ეს კლასში ვასწავლი ყველა ჩვენი სტუდენტები,
როგორც კამპუსში და off ახლა, და ის შეცვალა, რასაც ისტორიულად
სხვაგვარად ჩამოსატვირთი პროგრამა.
ასე რომ, თუ რას ხელმისაწვდომობის ერთ-ერთი ასეთი ვირტუალური მანქანები,
არსებითად, რომ მე აღწერილი ადრე.
ასე რომ, ეს კომპანია Cloud9 ალბათ იჯარის მესამე party-- მართლაც
ამ შემთხვევაში, Google-- მთელი bunch ვირტუალური მანქანები
რომ ისინი როგორღაც chop შევიდა ილუზია ინდივიდუალური სერვერები
რომ თითოეულ ჩვენგანს აქვს სრული კონტროლი.
ეს არ არის საკმაოდ ზუსტი ვთქვა, რომ ისინი ვირტუალური მანქანები,
თუმცა, იმის გამო, თუ რა Cloud9 რეალურად იყენებს
არის გარკვეულწილად ახალი ტექნოლოგია მოუწოდა containerization.
და ნება მომეცით დაიბრუნოს ამ სურათს აქ ხატავს ამ სურათს.
>> კონტეინერი არის, თუ თქვენ გავიხსენოთ სურათი
ადრე, ცოტა მსუბუქია წონა, ვიდრე ვირტუალური მანქანა.
სინამდვილეში, ხოლო ბოლო დრო ჩვენ ვისაუბრეთ არსებობს
რომ ოპერაციული სისტემა და hypervisor
და მაშინ, სტუმარი ოპერაციული სისტემის, სასტუმრო ოპერაციული სისტემა, სტუმარი ოპერაციული
სისტემა, თავზე თქვენი ფიზიკური ტექნიკა,
სხვაობა ეს ახალი ტექნოლოგია, containerization,
არის, რომ ისინი როგორმე გაუზიაროს იგივე ოპერაციული სისტემა.
მაგრამ ისინი მაინც შექმნა ილუზია ყველას
რომელსაც თავისი ექსკლუზიური ადმინისტრაციული უფლება და ფაილი
სერვერზე.
მაგრამ იქ ნაკლები პროგრამული უზრუნველყოფა შორის თქვენ და ტექნიკა.
შედეგად, რომელიც არის, თეორიულად, უმაღლესი შესრულებით,
რადგან თქვენ იყენებთ ან გაყვანაა ნაკლები რესურსები
რომ ე.წ. ვირტუალიზაციის ფენას.
ასე რომ, ეს არის ე.წ. containerization ბუნებით
გზით ტექნოლოგია მოუწოდა Docker, რომელიც ძალიან შემოდის.
და ეს არის ის, რომ ინჟინრები თქვენი კომპანიის
შეიძლება სახის ერთგვარი დაიწყოს საუბარი შესახებ კი, თუ ისინი არ უკვე,
მიუხედავად იმისა, რომ იქ ნამდვილად არ მიზეზი ხტომა ნებისმიერ bandwagons.
>> ასე რომ თქვა, რა თქვენ ალბათ ხედავთ ახლა
არის ეკრანზე, რომ გამოიყურება ცოტა მოსწონს ეს.
კარგი.
და უბრალოდ მირეკავენ მეტი თუ არა.
და თუ so-- მე მოვა მეტი თუ არა.
წავიდეთ წინ და დააჭირეთ, რომ დიდი პლუს, რათა შეიქმნას სამუშაო გარემოს,
და დაინახავთ ეკრანზე მოსწონს ეს.
შეგიძლიათ დარეკოთ სამუშაო გარემოს ასახელებს არაფერი გინდათ ახლა.
და მხოლოდ რეალურად სიმარტივის, წასვლა and-- ასევე, ზოგიერთ თქვენგანს
უკვე გვაქვს სამუშაო.
ეძახით რასაც თქვენ want-- ბიზნესი, Harvard, ხუთშაბათი, რაც გსურთ.
თქვენ არ გჭირდებათ აღწერილობა.
თქვენ შეგიძლიათ დატოვეთ შეტყობინების, თუ თქვენ უკვე გაქვთ bunch of სამუშაო მაგიდაზე.
თუ თქვენ იძულებული გახდა, მიიღოს ის საჯარო, რომ ჯარიმა დღევანდელი მიზნებისათვის.
აქ, ძალიან, არის ერთ-ერთი upsells.
თქვენ ერთი შეტყობინების სამუშაო გარემოს იყოს. მაგრამ თუ გსურთ მეტი,
თქვენ უნდა გადაიხადოს მეტი.
წინააღმდეგ შემთხვევაში, მათ აიძულებს თქვენ რათა თქვენი მუშაობა საჯარო.
მაგრამ ეს ჯარიმა, რადგან ისინი ასევე მიზანში ამ დროს ღია თემებში
ხელი შეუწყოს ადამიანებს, რეალურად თანამშრომლობა.
>> და ბოლოს, რაც მთავარია, თუმცა, მას შემდეგ, რაც თქვენ აირჩიეთ სახელი
და შემდეგ თქვენ კერძო ან საჯარო, დააწკაპუნეთ HTML5, დიდი ფორთოხლის ხატი
მარცხნიდან მეორე და შემდეგ დააჭირეთ შექმნა სამუშაო გარემოს.
და ის, სავარაუდოდ ერთი წუთი ან ასე რომ,
მაგრამ თქვენ მაშინ აქვს გარემო, ერთხელ თქვენ
გავაკეთოთ, რომ, რომელიც გამოიყურება თქვენში რა მაქვს ეკრანზე აქ არის.
მაგრამ, კიდევ ერთხელ, შესაძლოა, ერთ წუთში ან მეტი, რათა ამ ეკრანზე
ერთხელ თქვენ დააწკაპებთ შექმნა სამუშაო გარემოს.
მაგრამ მხოლოდ დროშა მე მეტი თუ გსურთ me უნდა შევხედოთ და არაფერს ვურჩევ.
კარგი.
ამიტომ, მე ვაპირებ, რომ ფონზე ახლა.
დამირეკეთ მეტი, თუ თქვენ, როგორც ჩანს გაქვთ რაიმე ტექნიკური სირთულეების.
მაგრამ, ერთხელ, რომ შესაძლოა, ცოტა რომ გახსნა.
და მოდით წავიდეთ წინ და ვისაუბროთ რა ეს ფაქტიურად იმას ნიშნავს, რომ ვებ გვერდზე,
რა HTML არის, და როგორ ყველა ამ ახლა აერთიანებს, როგორც ჩვენ ვიწყებთ
რეალურად გამოიყენოს ზოგიერთი ტექნოლოგია.
გამოდის, რომ მე არ შემიძლია გაგრძელდება ჩემი პატარა Mac აქ,
გახსნა მარტივი პროგრამა, ე.წ. TextEdit, ან Windows შემეძლო
ღია რაღაც მოუწოდა Notepad.exe.
და მე ვერ უბრალოდ, რომ რამე მოსწონს ეს "hello, world".
და მაშინ მე ვერ გადარჩენა ეს hello.txt ასე რომ არ არსებობს ჯადოსნური არსებობს.
ეს არაფერ შუაშია ვებ პროგრამირების, არაფერ შუაშია HTML.
მხოლოდ შექმნით უბრალო ტექსტური ფაილი.
მაგრამ აღმოჩნდება, რომ ვებ გვერდი ფაქტიურად მხოლოდ, რომ.
ეს არის მარტივი ტექსტური ფაილი, რომელიც შეიცავს ტექსტს რომ თქვენ შეიძლება აკრიფეთ თქვენს კლავიატურაზე,
მაგრამ ეს, როგორც წესი, მაგრამ არა ყოველთვის მთავრდება არ .txt მაგრამ .html ან .htm.
და თქვენ არა მხოლოდ აკრიფოთ სიტყვა ფაილი.
თქვენ რეალურად უნდა გამოვიყენოთ რამ მოუწოდა tags ან, უფრო ზოგადად, რაღაც
მოუწოდა მარკირების ენა.
>> ამიტომ, მე ვაპირებ, რომ ძალიან სწრაფად აკრიფოთ და შემდეგ ახსნას შემდეგ.
მე ვაპირებ პირველი ჩაწერეთ ეს, რომელშიც ნათქვამია,
hey, ბრაუზერი, აქ მოდის ვებ გვერდზე დაწერილი HTML.
და ეს ორი რამ ერთად ამბობენ, hey, ბრაუზერი, შემდეგ მართლაც HTML.
Hey, ბრაუზერი, აქ მოდის ხელმძღვანელი ან ზედა ჩემს გვერდზე.
Hey, ბრაუზერი, შიგნით ზევით ჩემი გვერდი, დააყენოს სათაური რომ არის, "hello,
მსოფლიოში. "
Hey, ბრაუზერი, შემდეგ უფროსი ჩემი გვერდი, აქ ჩნდება სხეულის ჩემს გვერდზე.
ხოლო, hey, ბრაუზერი, ორგანოს ჩემი გვერდი უნდა ითქვას, "Hello World".
ასე რომ, რა არის salient დეტალები აქ?
ეს არის ის, რაც ზოგადად ე.წ. doc ტიპის დეკლარაცია,
და, სიმართლე გითხრათ, ეს არის პატარა ძნელია გვემახსოვრება ეს პირველ რიგში.
თქვენ უბრალოდ სახის ასლი პასტა მას.
ეს არის ფორმალური გზა ამბობდა, hey, ბრაუზერი,
მე გამოყენებით HTML ვერსია 5, რომელიც გამოვიდა გარკვეულწილად ცოტა ხნის წინ.
ეს ჯადოსნური incantation, რომ ზოგიერთი ადამიანებს ცუდი გრძნობა დიზაინი
გადავწყვიტეთ, რომ იმ ძალიან ზევით ფაილი.
მიუხედავად იმისა, რომ ეს არის ცოტა arcane, რომ ყველა
ეს ნიშნავს hey, ბრაუზერი, აქ გააჩნია მობილური -5 HTML.
>> დანარჩენი ამ უკვე ჩვენთან გარკვეული დრო, ისტორიულად,
მაგრამ ეს უკვე ვითარდება, და ეს ალბათ უკვე მიღების ცოტა მარტივი.
შეამჩნია რამდენიმე მახასიათებლები რა მე გაამახვილა ყურადღება.
არსებობს ასეთი რამ დახრილი brackets-- მარცხენა bracket
და უფლება bracket.
და შეამჩნია სიმეტრია.
და სიმეტრია, ვგულისხმობ, როგორც მე აქვს ამ დაწყების tag აქ ან ღია tag
თუ თქვენ, აქ ქვემოთ მაქვს ჭდის ან ბოლოს tag, რომ
სხვადასხვა მხოლოდ იმდენად, რამდენადაც მას ამ slash დასაწყისში სიტყვა
HTML.
და შეგიძლიათ წარმოიდგინოთ, ეს, როგორც მე casually
სთავაზობდა ადრე, hey, ბრაუზერი, აქ მოდის ზოგიერთი HTML.
და, პირიქით, hey, ბრაუზერი, რომელიც არის მას HTML-- დაწყების და დასრულების.
>> ამასობაში hey, ბრაუზერი, აქ მოდის უფროსი ჩემს გვერდზე.
Hey, ბრაუზერი, რომ ის ხელმძღვანელი.
Hey, ბრაუზერი, აქ არის სხეულის ჩემს გვერდზე.
Hey, ბრაუზერის, რომ ეს ორგანო.
და შიგნით რომ გარკვეული თვითნებური ტექსტი ახლა.
და შიგნით ხელმძღვანელი იმავდროულად, არის რამდენიმე თვითნებური მაგრამ tagged,
ასე ვთქვათ, ტექსტი, რომელიც ამბობს, სათაური ჩემი გვერდი უნდა იყოს "hello, world".
ახლა, ახლა თქვენ შეგიძლიათ ვივარაუდოთ, რომ ბრაუზერები
აქვს only-- ან, უფრო სწორად, ვებ გვერდები მხოლოდ ორი parts-- ხელმძღვანელი და სხეულის.
და ხელმძღვანელი ზოგადად მხოლოდ როგორიცაა მენიუ ბარი, პერსონალის
უბრალოდ ძალიან დაბრუნება.
და სხეულის guts გვერდზე, ყველაფერი, რომ დიდი მართკუთხედი
რომ ავსებს ეკრანზე.
ამიტომ, მე ვაპირებ წავიდეთ წინ და ამის გაკეთება.
მე ვაპირებ წავიდეთ წინ და დააჭირეთ Save ფაილის შენახვა.
და მე ვაპირებ გადარჩენა ეს, როგორც hello.html,
და მე უბრალოდ აპირებს ამას ჩემს desktop.
და მე ვაპირებ წასვლა წინ და დააჭირეთ Save.
და შეამჩნია ჩემი Mac ზე ნაკლებად ყვირილი at me.
დარწმუნებული ხართ, რომ გსურთ ამის გაკეთება?
და მე ვაპირებ ვთქვა, დიახ, გამოიყენოთ HTML.
მე უკეთ ვიცი, ამ შემთხვევაში.
და ახლა მე ვაპირებ წასვლა ჩემი desktop სადაც მე ამ ფაილის მოულოდნელად.
და მე ვაპირებ, რომ ორმაგი დაწკაპეთ იგი.
და თქვენ შეამჩნევთ, რომ, ძირითადად, Chrome გახსნეს.
სწორედ იმიტომ, რომ ის ჩემი ბრაუზერი.
და ეს უბრალოდ ამბობს, "hello, world".
მაგრამ ის ამბობს, "hello, მსოფლიოში "ორ ადგილას.
ყურადღება მიაქციეთ, ზედა მარცხენა.
საკმაოდ რთული მენატრება, რომ.
ეს არის დიდი და თამამი.
და სად არ ჩანს ამბობენ, "hello, world"?
>> აუდიტორია: tab.
>> დევიდ ჯ Malan: ჰო, tab თავად.
ასე რომ, როდესაც მე ვუთხარი ხელმძღვანელი გვერდი ყველაფერი top--
და მართლაც ამ სათაურით.
ეს მხოლოდ tab აქ.
და შემიძლია დახევის ეს tab გარეთ ისე, რომ არ აღრეული.
ეს არის მხოლოდ ერთი tab ახლა, და მართლაც, ჩვენ ვხედავთ, "hello, world"
აქ და "hello, world" ქვემოთ აქ.
ასე რომ, საკმაოდ მარტივია.
მაგრამ ეს ასევე არის საკმაოდ მარტივია.
და, ფაქტობრივად, მე მიახლოება.
მე შეიძლება შეიცვალოს შრიფტის ზომა გადიდებისათვის ხელმისაწვდომობა.
მაგრამ მოდით ახლა, რომ რამე ცოტა უფრო საინტერესო.
>> მე ვაპირებ go-- Whoops, ნება მე დავუბრუნდეთ ჩემი ტექსტური ფაილი.
მე ვაპირებ უკან ჩემი ტექსტური ფაილი, და მე ვაპირებ
შეცვალოს ეს და ამბობენ, "Hello, Disney World".
გადარჩენა.
და დაბრუნდეს ჩემი ბრაუზერი და დააწკაპუნეთ Reload.
და ახლა, რა თქმა უნდა, ამბობს "Disney World".
და მე ვაპირებ ხელოვნურად მასშტაბის მხოლოდ ასე უფრო ადვილია ვხედავ.
ასე რომ, ახლა, სამწუხაროდ, მე ასეთი მინდა რომელთა მიზანია რეალურად, ეს არის Mac ფუნქცია.
მინდა დააჭირეთ Disney World და წავიდეთ სადმე, როგორიცაა disney.com,
მაგრამ, რომ არ მუშაობს.
ასე რომ, ძირითადი იდეა ვებგვერდი ჰიპერბმულებს, კავშირები, რომ სხვაგან.
ასე რომ, როგორ შემიძლია ამის გაკეთება?
ისე, მე შეიძლება, უბრალოდ ამბობენ, "Hello, http://www.disney.com".
შენახვა.
განაახლეთ.
მაგრამ ეს ძალიან, არ clickable.
და რა ლამაზი აქ, მიუხედავად იმისა, რომ ეს არ არის ფუნქციური ჯერჯერობით,
ის არის, რომ, როგორც ჩანს, ბრაუზერის ფაქტიურად მარტო
რა ვუთხრა მას ამის გაკეთება.
ასე რომ, თუ მე უბრალოდ აკრიფეთ URL, როგორც ეს, ის უბრალოდ აპირებს ეჩვენებინა URL.
მე უნდა გამოვიყენოთ tags და markup ენის რეალურად ვუთხრა
ბრაუზერის კიდევ უფრო მეტი.
ამიტომ, მე ვაპირებ წავიდეთ წინ და წაშლა ამ მომენტში.
და მე ვაპირებ ვთქვა, hey, ბრაუზერი, დაიწყოს წამყვანმა აქ,
ლინკები, ასე ვთქვათ.
და ჰიპერ მითითება, დანიშნულების რომ წამყვანმა, უნდა იყოს ამ URL.
და შეამჩნია ჩემი შეთავაზებები.
მე შეიძლება გამოიყენოს ერთჯერადი შეთავაზებები, ძალიან, მაგრამ თქვენ უნდა იყოს თანმიმდევრული,
და მე საერთოდ უბრალოდ გამოიყენოთ ორმაგი შეთავაზებები შენარჩუნება ეს მარტივი.
ყურადღება მიაქციეთ, მე ვაპირებ, რომ დახუროს აქვს.
და მერე აქ მე ვაპირებ ამბობენ, "Disney World".
და ახლა მე უნდა გარკვეული symmetry-- ღია bracket, / a, დახურული ფრჩხილი.
>> ასე რომ, რა არ გავაცანი?
ჩვენ გვქონდა რამდენიმე tags უკვე.
HTML, ხელმძღვანელი, სახელწოდება, Body, ყველა tags, ასე ვთქვათ,
ღია და დახურული კოლეგებთან.
მაგრამ შეამჩნია, რომ ეს არის ერთგვარი ფუნდამენტურად განსხვავებული.
ეს არის ის, რაც ჩვენ მოვუწოდებთ in HTML ატრიბუტი.
და ატრიბუტი მხოლოდ ძირითადი ღირებულება წყვილი.
ეს არის საერთო რამ კომპიუტერული science-- ძირითადი ღირებულება წყვილი.
ეს არის ერთგვარი ინსტრუმენტი ვაჭრობა.
გასაღები და მნიშვნელობა.
სიტყვა და შემდეგ რამდენიმე სხვა სიტყვა ან სიტყვები.
და ამ შემთხვევაში, გასაღები არის href, და მნიშვნელობა, რომ სრული URL.
და რა ატრიბუტი არ არის ის გავლენას ახდენს ქცევის აქვს.
და ამ შემთხვევაში, ჩვენ უნდა გავლენა მოახდინოს ქცევის წამყვანმა tag,
იმიტომ, რომ ჩვენ უნდა წამყვანმა ეს ბმული სადღაც.
და როგორ გავაკეთოთ, რომ გზით ატრიბუტი.
>> ამიტომ, მე ვაპირებ წავიდეთ წინ და გადარჩენა ფაილი არის.
დავუბრუნდეთ ჩემს ბრაუზერში და განახლება.
და, voila, ჩვენ ახლა აქვს დასაწყისი ლეგიტიმური ვებ-გვერდზე.
სუპერ მარტივია, მაგრამ თუ hover ამას ცნობა, ქვედა მარცხენა კუთხეში,
ეს სუპერ პატარა.
მაგრამ თქვენ ხედავთ www.disney.com.
და თუ მე დაწკაპეთ იგი, მართლაც, ეს აცლის me მოშორებით disney.com.
ახლა, საინტერესო რამ აქ არის ის, რომ არ არის
best-- ყველაზე გაყიდვადი URL, მაგრამ ეს ჯარიმა, რადგან ეს ფაილი არ
არსებობს მსოფლიო აბლაბუდა.
ის არსებობს, როგორც ადგილობრივი ფაილი, როგორც ჩანს, ჩემი მომხმარებელი დირექტორიაში / jharvard--
ჯონ ჰარვარდის / desktop.
მაგრამ მას აქვს URL.
ეს რაღაც უნდა იყოს ადგილობრივი.
სამწუხაროდ, არც ერთი შეგიძლიათ ეწვევა ეს იმიტომ, რომ, თუ თქვენ ჩაწერეთ ეს URL,
ნეტავ ვეუბნებოდი თქვენს ბრაუზერში, ვეძებოთ ფაილი სახელად hello.html
თქვენს ხისტ დისკზე.
და, რა თქმა უნდა, თუ თქვენ უკვე შემდეგ გასწვრივ ხელით,
ის არ აპირებს იქ.
>> ასე რომ, ჯარიმა.
ჩვენ ჯერ კიდევ გზა, საბოლოო ჯამში, მიიღოს ამ ფაილის შევიდა ინტერნეტში,
მაგრამ მოდით აჯავრებენ გარდა რამდენიმე უსაფრთხოების თვალსაზრისით რასაც ჩვენ მხოლოდ
დაინახა და უსიამოვნოა ის ადრინდელ დისკუსია ამ დილით.
გამოდის, რომ იმ შემთხვევაში, თუ ბრაუზერის ფაქტიურად აკეთებს
რა ვუთხრა, რომ ამის გაკეთება, და როგორც ჩანს უნდა იყოს საქმე, რომ წამყვანმა tag არის
გავლენას ახდენს ღირებულება ეს ატრიბუტი მოუწოდა href
მაგრამ იგი აჩვენებს ამ ტექსტი, ეს, როგორც ჩანს,
ნიშნავს იმას, რომ მე შეეძლო URL ორივეგან და შემდეგ განაახლეთ
და ახლა ვხედავთ URL და წასვლა URL.
ყურადღება მიაქციეთ, თუ hover ქვედა მარცხენა, მე მართლაც აპირებს ჯერ კიდევ disney.com.
>> ასე რომ, თუ თქვენ ოდესმე ყოფილა phished-- P-H-I-S-H-E-D--
ერთ-ერთ იმ ყალბ წერილებს საწყისი როგორიცაა PayPal თქვენს ბანკში,
თქვენ ალბათ მიღებული ბმულები შიგნით ელ, რომ თქვენ კითხულობთ, რომ
ეუბნება, რომ დააწკაპუნეთ აქ წასვლა ადასტურებენ თქვენი პაროლი, ან დაადასტუროს თქვენი დაბადების
სოციალური და რაღაც სოციალურად საინჟინრო თქვენ გამჟღავნება
ინფორმაცია.
ისე, მე შეიძლება სახის მიიღოს უპირატესობა ამ, ვერ მე?
მე შეიძლება ითქვას, როგორიცაა, www.paypal.com.
და ნაცვლად disney.com, მე შეიძლება წავიდეს, ისევე, badguy.com.
განაახლეთ.
და რამდენად ადვილი არის სულელი, განსაკუთრებით არასამთავრობო ტექნიკური მკითხველს
ან cursorily კითხულობს მკითხველს, ვიდრე დააჭირეთ
ლინკი მსგავსი, რომელიც თუ მე დააწკაპუნეთ it-- მე რეალურად არ მინდა წასვლა badguy.com.
მე არ ვიცი, რა არის რეალურად არსებობს.
ასე რომ, paypal.com, შეტყობინება, რასაც ის ამბობს, რომ ის აპირებს,
მაგრამ, რა თქმა უნდა, თუ გავითვალისწინებთ ქვემოთ სუპერ დაბალი, ეს ცოტა ბუნდოვანი,
მაგრამ ის ამბობს badguy.com.
ეს არის ერთადერთი გეტყვით ახლავე რომ მე ვაპირებ, რომ არასწორი ადგილი.
და როდესაც ვთქვი ადრე, რომ ბანკები ნამდვილად არ უნდა წაახალისოს ან მატარებელი
მომხმარებლის დაწკაპვით ბმულები, ეს არის მხოლოდ ერთი გამოვლინება გახდა.
და ეს რომ მარტივი.
თქვენ ახლა მოწინააღმდეგის თუ თქვენ რაღაც მოსწონს ეს
და ცდილობენ Trick შესახებ შევიდა გამოჩენის თქვენს საიტზე.
მაგრამ ახლა, ჩვენ გავაგრძელებთ რამ ლამაზი და სუფთა.
ჩვენ ვაპირებთ, რომ წავიდეთ წინ გადახვევა და ეს ცვლილებები.
განაახლეთ გვერდი.
და მე დაბრუნდეს disney.com.
>> მოდით ვნახოთ, თუ ჩვენ არ შეგვიძლია გაღიზიანება ამ გარდა ცოტა მეტი.
ასე რომ, "hello, Disney World".
მე ვაპირებ ვთქვა ქვემოთ აქ.
იქნებ მე ვაპირებ გარკვეული ოთახი.
"ჩვენ ვიმედოვნებთ, რომ თქვენ ისარგებლოს თქვენი ყოფნის!"
გადარჩენა.
განაახლეთ.
ეს არ rea--, რომ არ არის რა მე განკუთვნილი, არა?
ვგულისხმობ, თუ მე ვმკურნალობ ტექსტი ფაილი, როგორიცაა სიტყვა პროცესორი,
რა იმედი მაქვს მოხდება აქ?
ჰო, მე იგრძნონ უნდა იყოს ხაზის შესვენების აქ,
ასე რომ გრძნობს buggy რამდენიმე გზა.
მაგრამ ეს, ფაქტობრივად, განზრახ, იმიტომ, რომ ისევე, როგორც ადრე,
ბრაუზერის მხოლოდ აპირებს რა გითხრათ, ეს უნდა გააკეთოს.
მე არ უთხრა, რომ დაარღვიოს ხაზები.
მე არ უთხრეს, რომ ეს ქვევით, მაშინაც კი, მიუხედავად იმისა, რომ, ინტუიციურად, ვგრძნობ, ისევე როგორც მე.
გამოდის, რომ ჩვენ გვჭირდება ცოტა მეტი markup,
და მე ვაპირებ დაფიქსირება ამ ასეთია.
მე ვაპირებ, რომ შესავალში ეს პირველი მიესალმები ერთად რასაც პუნქტი აქვს.
და შემდეგ მე ვაპირებ წავიდეთ წინ და გადაიტანოთ ეს სხვა სასჯელი
სხვა პუნქტი აქვს, მიუხედავად იმისა, ისინი სუპერ მოკლე პუნქტები.
ახლა მე ვაპირებ გადარჩენა.
განაახლეთ.
და ახლა ჩვენ გვაქვს, რომ სივრცეში, და ჩვენ ერთგვარი
აქვს სემანტიკა ორი ცალკეული პუნქტები.
>> ეს არის ყველა კარგი და კეთილი, მაგრამ ეს კარგი იქნება, რომ დაამატოთ გამოსახულება ამ გვერდზე,
ამიტომ მე ვაპირებ მოსაძებნად ბაბილინა Google Images.
და უბრალოდ for fun, მე აპირებს დაიბრუნოს ეს იმიჯი.
მე ვაპირებ წავიდეთ წინ არის და დაიბრუნოს URL ეს სურათი,
მიუხედავად იმისა, რომ არსებობს სხვადასხვა გზა ამის გაკეთება.
ახლა, მე უბრალოდ აპირებს კოპირება URL.
მე ვაპირებ დავუბრუნდეთ ჩემს ტექსტი ფაილი, და მე ვაპირებ ვთქვა აქ,
img src = გაცემა unquote რომ URL, სუპერ ხანგრძლივი.
და მაშინ ცნება სურათი არის ცოტა განსხვავებული.
იქ ნამდვილად არ ცნება ამოსავალი იმიჯი და დამთავრებული იმიჯი,
როგორც დამწყებ tag მოეღოს აქვს.
ასე რომ, ის გრძნობს, ცოტა უცნაურია, რომ me სემანტიკურად ამის გაკეთება,
ახლო-image აქვს.
ეს არ არის არასწორი.
ეს შესანიშნავად სწორი, და ეს წახალისება,
მაგრამ იქ სტენოგრამის ნოტაცია.
მე შემიძლია სახის ერთდროულად გახსნას და დახუროს იგივე tag,
და რომ გახდის ბრაუზერის ბედნიერი.
ასე რომ, ეს მხოლოდ პატარა უფრო ლაკონური რამ
რომ კონცეპტუალურად ნამდვილად არ აზრი, რომ დაიწყება და დასრულდება.
ისინი უბრალოდ არ არსებობს, ან არ არის.
>> ამიტომ, მე ვაპირებ გადარჩენა ამ და დაბრუნდეს ჩემს "hello, world" გვერდზე და განახლება.
და ეს არის პატარა კონტროლიდან, იმიტომ, რომ სურათი არის რეალურად
პატარა დიდი, მაგრამ ეს OK.
მე ვერ შეცვლის მას ამ პროგრამაში.
და იცით, რა.
მხოლოდ იმის დემონსტრირება, მე აპირებს რეალურად ამბობენ
სიგანე ამ რამ უნდა მხოლოდ 200 პიქსელი, 200 წერტილი.
ნება მომეცით წავიდეთ წინ და შენახვა და განახლება, და ახლა გვერდი
გამოიყურება უფრო გონივრული.
მაგრამ შეამჩნია ნიმუში.
ისე, მე სახის ასწავლა ყველა of HTML გარკვეული აზრით, მინიმუმ
კონცეპტუალურად, რადგან ყველა HTML არის ამ tags-- ღია tags, დახურული tags,
და ატრიბუტები, რომ ცვლილებები მათი საქციელი.
და, როგორც ჩანს, ყოველ tag შეიძლება ნულოვანი ან ერთი
ორი ან მეტი ატრიბუტები, თითოეული რომელიც აკეთებს რაღაც ცოტა განსხვავებული.
ახლა, როგორ თქვენ იცით, რა არსებობს?
თქვენ უბრალოდ მოვუსმინოთ ვინმე ისევე, როგორც მე გეტყვით, რა არსებობს,
ან უბრალოდ Google გარშემო tutorial HTML, და ეს ნამდვილად არის ეს მარტივია.
>> მართლაც, როდესაც მე ვიყავი ბაკალავრიატის წლის წინ და შეიტყო, HTML,
ერთ-ერთი ჩემი მათემატიკის სწავლების თანაშემწეები უბრალოდ გაატარა
ცოტა დრო ვასწავლი me მოსწონს ნახევარი საათი, საათი,
და მერე იყო ჩემი გზა.
მე ჩემს გზა მიღების ყველაზე მახინჯი ვებ ოდესმე,
რომელიც, როგორც ჩანს, მე არ მართლაც ვითარდებოდა მიღმა.
მაგრამ საქმე ისაა, რომ, კიდევ მესმის, რომ ეს მარტივი იდეები
თუ arcane text--, თუმცა ეს მარტივი იდეების დაწყებული აზრის
და დახურვის აზრის, შენახვა ყველაფერი კარგად დაბალანსებული,
ეძებს რაღაც up, შეცვლის ქცევის იმ tag, რომ მართლაც ყველა
ეს არის და ეს.
და სინამდვილეში, თუ ჩვენ ახლა წასვლა რაღაც Google.com-- ფაქტობრივად,
მოდით წავიდეთ ადგილი ცოტა მეტი reasonable-- stanford.edu.
და მე ვაპირებ წასვლა ნახვა, დეველოპერი, წყარო.
ეს მახინჯი, მაგრამ შეამჩნია და მე მიუახლოვდით ცნობა
რაღაცები, რომ ნაცნობი უკვე.
არსებობს ეს აქ, რომელიც ბრაუზერში.
აქ ჩნდება HTML5.
არსებობს HTML.
როგორც ჩანს, არ არის ატრიბუტი, რომელიც მე არ
გამოყენება, რომელიც განსაზღვრავს ენის გვერდზე,
და ეს შეიძლება დაეხმაროს ავტომატური თარგმანი და პერსონალის იგრძნობა.
აი ხელმძღვანელი გვერდზე.
აი ტიტული სტენფორდის გვერდზე.
არსებობს tag მე არ ვისაუბროთ ყოლა Meta tag.
ეს მხოლოდ ერთგვარი ინფორმაცია.
იგი ეხმარება SEO, ან ძებნა ძრავის ოპტიმიზაცია,
ან Google ძიების შედეგები ან მოსწონს.
მაგრამ თუ ჩვენ ვეძებთ, შენარჩუნება ეძებს, აქ არის ორგანო აქვს.
და იქ bunches სხვა tags ჩვენ არ ისაუბრა არავის გაუკეთებია.
მაგრამ Div არის ერთ ერთი სამმართველოს გვერდზე.
ეს იგივეა, უხილავი მართკუთხედი თუ სახის გვინდა სულიერად
დაყოს თქვენი გვერდი შევიდა სხვადასხვა ერთეული ხაზზე.
და შემდეგ უამრავი divs I ვხედავ, რაღაც მოუწოდა კლასი,
მაგრამ ჩვენ დავბრუნდებით რომ.
>> ეს არის interesting-- ფორმები.
ფორმები მთელი ვებ.
ნებისმიერი საძიებო ყუთი თქვენ ოდესმე გამოიყენება ფორმაა.
და, ასე, მოდით რეალურად ვხედავ.
ფორმა.
აქცია.
აქცია ამ ფორმით, რასაც ისტორიული მიზეზების გამო, ის არის, რომ URL.
მეთოდი "პოსტი".
გამოდის, რომ HTTP მოთხოვნა შეგიძლიათ გამოიყენოთ ზმნა "მისაღებად," როგორც ჩვენ ვნახეთ ადრე,
ან "პოსტი".
და ვხედავ განსხვავებას ამ მომენტში.
მოდით რეალურად ვხედავ, რა არის ეს.
ნება მომეცით დაბრუნდეს Stanford გვერდზე.
რა ფორმით გველაპარაკებიან შესახებ, როგორ ფიქრობთ?
რა გადასვლა out at თქვენ?
>> აუდიტორია: ძებნა ყუთი.
>> დევიდ ჯ Malan: ჰო.
ასე რომ, ზედა მარჯვენა აქ არის ამ ძებნის ყუთში.
და რომ ის, თუ როგორ ხორციელდება it-- tag ფაქტიურად არის ღია bracket ფორმა.
და მაშინ მოდით მოძებნოთ რამე.
მოდით ძიება buddy of mine-- "ნიკა Parlante".
შევა.
და რა თქმა უნდა, ის წავიდა ოდნავ განსხვავებული URL.
ნება მომეცით დაბრუნდეს აქ.
მოდით ძიება "კურსები".
ჯანდაბა.
წავიდა სხვადასხვა URL.
ასე რომ, სტენფორდის დასძინა ჯადოსნური რომ ისინი არ იღებენ ჩემთვის URL
რომ დავინახეთ, აქცია ატრიბუტი არსებობს.
მაგრამ ეს ფორმა აქ ხორციელდება წმინდა გზა ამ markup აქ, ამ tags.
ფაქტობრივად, აქ არის შეყვანის გაცნობის ძებნა, რომელიც გსურთ.
აქ არის შეყვანის სხვა ტიპის ძიება.
აქ არის შეყვანის სიმებიანი თავად.
და ასე რომ მიზანი არ გადაიტანოთ ჩვენს გონებაში გარშემო ყველა ამ tags
არამედ იმიტომ, რომ ვხედავ.
უბრალოდ გახსნის და დახურვის tags და ეძებს რამ მდე.
ჰო?
ვიქტორია?
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ეს კარგი კითხვაა.
ეს არის პატარა trickier ვხედავ.
მიადევნე თვალი დაბრუნებას, რომ საკითხი მხოლოდ რამდენიმე წუთში
შევხედოთ რაღაც მოუწოდა CSS, ან კასკადური სტილების,
და ჩვენ შეგვიძლია ცდილობენ infer იმდენი გვერდზე.
ასე რომ, თუ ჩვენ ახლა შევხედოთ google.com, ვნახოთ, რა მათი გვერდზე ჰგავს.
თქვენ they're--, რომ მიმზიდველი დღეს.
კარგი.
ყველაფერი შესრულებულია.
ყველა უფლება, ასე წყარო.
თქვენ ფიქრობთ, Google აქვს მართლაც ლამაზი კოდის.
ასე რომ, როგორც ჩანს, რა ხდება აქ?
და სინამდვილეში, ეს არ არის კიდევ HTML.
ეს არის რაღაც მოუწოდა JavaScript.
და მოდით შენარჩუნებას აპირებს და აპირებს.
მე კი არ ვიცი სად გვერდზე იწყება.
მე ვაპირებ გამოიყენოთ Command F, ღია bracket HTML.
ყველა უფლება, ეს არის.
აღმოვაჩინე გვერდის დასაწყისში და არსებობს იმდენად პერსონალის აქ.
>> რა არის რეალურად ხდება?
ისე, თქვენ იცით, რა, ჩვენ შეგვიძლია გაწმენდა ამ up.
თუ მე ნაცვლად წასვლა ეს შეამოწმოს პანელი, ეს განსაკუთრებული სადიაგნოსტიკო ინსტრუმენტი,
და წასვლა არ ქსელის, სადაც ჩვენ ვაპირებთ შენარჩუნება დღეს,
მაგრამ თუ მე ელემენტები, რა არის მართლაც ლამაზი
ის არის, რომ ბრაუზერი აქვს ბევრი ბევრად უკეთესი თვალში, ვიდრე მე.
და ბრაუზერის წაიკითხოს რომ ხმაური ვებ გვერდზე,
რომ HTML mail ჩვენ უბრალოდ შევხედე, და მას შეუძლია
გარჩევის იგი ან წაკითხული და გაანალიზება და reformat იგი
ლამაზი ადამიანის მეგობრული გზით.
ასე რომ, ის, რაც მე ახლა ვხედავთ ამ ეკრანზე აქ
ელემენტები, ზუსტად იგივე შინაარსის, მაგრამ ისინი დაზუსტებისათვის ყველაფერი,
ისინი colorized, მაგრამ ეს ზუსტად იგივე ტექსტი
რომ მე გადმოწერილი სერვერზე.
>> და რა ლამაზი ახლა არის მე ვხედავ ამ ორგანოს, instance-- ცნობა,
გვერდზე მაინც შედგება მხოლოდ ერთი ხელმძღვანელი და სხეულის,
და შემიძლია იერარქიულად ჩაყვინთვის აქ.
გაითვალისწინეთ, რომ Google, როგორც ჩანს, to divs-- ამ ერთი და ეს ერთი.
შემიძლია გაფართოებას, რომ.
არსებობს მთელი bunch სხვა divs.
ასე რომ, ეს ცოტა რთული.
მაგრამ მოიცადე.
ეს, როგორც ჩანს, იმდენად უფრო იკითხება, შედარებით, ვიდრე ეს.
რატომ არის Google უხერხულ თავად მხოლოდ გაგზავნის
ეს დიდი სასადილო კოდი ზოგიერთი ერთგვარი უბრალოდ უნდა განახორციელოს რაიმე
რომელიც ძალიან მარტივია ერთი შეხედვით?
მსგავსად, რატომ არ დაამატოთ მეტი ფართები?
რატომ არ დააჭიროთ, როგორც მე?
ნახეთ, რა კარგი ვიყავი წერა ვებ გვერდზე.
მე დააჭიროთ ასე გატაცებით.
მე დაზუსტებისათვის ასე რომ ყველაფერი იმდენად ლამაზი და იკითხება.
რატომ Google არ პრაქტიკაში იგივე?
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: კარგი.
ძალიან სამართლიანი.
მათ არ აქვთ გარკვეული პირის Google ხელით
განახლებაზე მთავარი გვერდი აღარაა.
ეს არ არის 1999 მთელი მსოფლიოს მასშტაბით.
ასე, რომ მათ პროგრამული უზრუნველყოფა.
მათ აქვთ სხვა ინსტრუმენტი, რომელიც წარმოქმნის დინამიურად ისინი HTML.
რა თქმა უნდა, რომ კოდი თავად დაიწერა ადამიანები,
მაგრამ რეალობა ის არის, ეს საკმაოდ სამართლიანი ვთქვა,
ბრაუზერის თქმა უნდა, არ მაინტერესებს, რამდენად რთული კოდი არის.
მაგრამ არსებობს კიდევ უფრო მყარი ტექნიკური მიზეზი
რომ Google ავრცელებს მათი HTML კოდი ასეთ დაუდევარი, როგორც ჩანს,
აბსოლუტური გზა ყველა შეფუთული ერთად ძალიან ცოტა way-- ძალიან ცოტა
გზა გაფორმებით, როგორც მე.
>> აუდიტორია: [INAUDIBLE]
>> დევიდ ჯ Malan: Faster?
რატომ?
და რა ვთქვა, Lydia?
უფრო სწრაფად?
რატომ უფრო სწრაფად?
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: არსებობს არსებობს სივრცე წაიკითხა.
ჰო.
ასე რომ, ვფიქრობ იმაზე, თუ რა სივრცე.
ასე რომ, თითოეული ხასიათი კლავიატურაზე იღებს გარკვეული სივრცე წარმოადგენს,
ან ფიზიკური, როგორც ეს იკავებს, რომ ბევრი სივრცე,
ან როგორღაც ქვეშ hood, რომელიც მოითხოვს, მეხსიერება.
და როგორც განზე და ჩვენ გაიგო მეტი ამ tomorrow--
ყოველ ხასიათი კლავიატურაზე როგორც წესი, მოითხოვს, 8 ბიტი, და ერთი ბაიტი.
ასე რომ, ნიმუში 8 zeros და პირობა, ან უბრალოდ 1 byte, როგორც ჩვენ
ადამიანები, როგორც წესი, ამბობენ.
ასე რომ, პატარა, მაგრამ ეს ჯერ კიდევ არასამთავრობო ნულოვანი.
ეს არის კიდევ გარკვეული თანხის სივრცეში.
ასე რომ, თუ ინჟინერი ან Google ჰიტები სივრცეში ბარი მხოლოდ ერთხელ, და ვარაუდობენ,
Google-- ეს სუპერ popular-- ვარაუდობენ, რომ მილიარდი ადამიანი
ეწვევა მათი მთავარი გვერდი დღეს, ან რაღაც რაოდენობის ხალხი
ეწვევა სახლში გვერდზე მილიარდი ჯერ დღეში,
რამდენი დამატებითი bytes აქვს, რომ პროგრამული უზრუნველყოფის ინჟინერი მხოლოდ ღირს Google
დარტყმის მისი სივრცეში ბარი ერთხელ?
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: არ არის, რომ ცუდი.
მხოლოდ ერთი ბაიტი ჯერ მილიარდი.
ასე რომ, a--
აუდიტორია: 8 მილიარდი გიგაბაიტი.
დევიდ ჯ Malan: არ 8 მლრდ.
8 მილიარდ ბაიტს.
მაგრამ 1 გბ.
1 გბ იქნება ერთეული ზომის.
თუ იგი აკეთებს ორი ფართები, 2 გბ.
სამი გბ.
არა?
ეს სასწორები ძვირად.
ასე რომ, იმ შემთხვევაში, როგორიცაა Google, რომელიც, მიანიჭა, რომლებიც უკიდურეს შემთხვევაში,
არსებობს სხვა საკითხები, რომლებიც წარმოიქმნება მხოლოდ მიერ მიღების ძალიან გონივრული გადაწყვეტილებები
ან მიღების ძალიან მარტივია ადამიანის ქმედებები, იმიტომ, რომ მას ამ magnified ეფექტი.
ასე რომ, ერთ-ერთი მიზეზი ეს გამოიყურება ასე შეკუმშული
ზუსტად ისე, როგორც Victoria said-- ეს იყო მხოლოდ გამომუშავებული კომპიუტერი მაინც.
ასე რომ, არ არის დიდი გარიგება.
მოდით ბრაუზერის გაერკვნენ ის.
მაგრამ ეს ასევე განზრახ არ გვაქვს ბევრი სივრცე,
რადგან სივრცე არ არის საჭირო.
და სივრცეში რეალურად ღირს ფული.
>> ეს არც ღირს დროის, მხოლოდ იმიტომ, რომ დააყენებს
რომ ბევრად უფრო მონაცემების გარეთ google.com ს შტაბ-ბინაში მხოლოდ
აქვს გარკვეული თანხა დროს, მაშინაც კი, თუ ის მილიწამებში
ან microseconds, მაგრამ დასძენს მდე მეტი ამდენი მომხმარებლებს, ან უფრო სავარაუდოა,
ეს, ალბათ, ღირს ფული.
Google ალბათ აკავშირებს ვინმეს მსოფლიოში, ერთ-ერთი
იმ სწვდება რაოდენობა, და თუ მათ აქვთ
გარკვეული სახის ფინანსური ურთიერთობები რომლის დროსაც მათი მონაცემებით ღირს ფული,
ისინი შეიძლება ასევე მინიმუმამდე რამდენად მონაცემები
ისინი იფურთხება გარეთ მათი ინტერნეტით.
>> ასე რომ, სასაცილო რამ, თუმცა, საბოლოო ჯამში, ან იქნებ reassuring რამ,
ის არის, რომ მიუხედავად იმისა, რომ ეს გამოიყურება საშინლად აბსოლუტური, ბოლოს დღეს,
ეს ჯერ კიდევ ზუსტი იმავე პრინციპებს, ეს ძალიან მარტივია გვერდი აქ არის HTML
გვერდზე.
ასე რომ მხოლოდ შეჯამება და ასე რომ თქვენ აქვს კანონიკური ვერსია თუ არ იყო
შემდეგ ერთად არჩევანი აქ, აქ შეიძლება იყოს ყველაზე მარტივი ვებ გვერდები,
ასე რომ, რაღაც თამაში, ალბათ, მოგვიანებით.
>> ისე, მოდით გააცნობს რამდენიმე სხვა იდეები არის.
ჩვენ შესახებ დანერგვა რაღაც მოუწოდა სტილი აქვს.
ჩვენ შეგვიძლია stylize ამ გვერდზე უფრო საინტერესო გზები.
ასე რომ, ხოლო HTML ელ ყველაფერი არის მარკირების
მონაცემები, ერთგვარი სასურველი, რომ ბრაუზერის როგორ სტრუქტურირებაზე მონაცემები,
სად უნდა დააყენოს იგი, CSS, ან კასკადური სტილების,
მეორე ენის, რომ ზოგადად იღებს ერთობლივი ერთად HTML
როგორც ჩვენ see-- მაგრამ ჩვენ შეგვიძლია გაწმენდა რომ წელს ერთი წუთით, რომელიც იღებს
ეს საბოლოო მილის, და ეს stylizes იგი.
იგი იღებს ფერები მხოლოდ უფლება, შრიფტის ზომის მხოლოდ უფლება,
წესი მხოლოდ უფლება.
ეს ყველაფერი ესთეტიკის და გაფორმებით, არ
ფუნდამენტური მონაცემები თავისთავად.
და მარტივი გზა, რათა ნახოთ ეს, ალბათ, მაგალითად.
ამიტომ, მე ვაპირებ წასვლა მეტი ჩემი უბრალო ტექსტური ფაილი.
და რაღაც მომენტში, მე ფეხით ჩვენს მეშვეობით პროცესში
ამით საკუთარ თავს.
>> მე ვაპირებ დავუბრუნდე ჩემს ფაილი აქ და განაახლეთ გვერდი მხოლოდ
იმის დასადასტურებლად, თუ რას ჰგავს.
ეს არის ის, სადაც ჩვენ ვართ ახლა.
ვგრძნობ, როგორიცაა ბავშვები სარგებლობენ გარკვეული ფერი ამ ვებ-გვერდზე.
ამიტომ, მე ვაპირებ წასვლა აქ შევიდა ხელმძღვანელი გვერდზე.
და მე ვაპირებ ამის გაკეთება სტილი, / სტილი.
და შემდეგ შიგნით ამ, მე ვაპირებ ვუთხრა ორგანოს ჩემი page--
და ეს გაფორმებით არის, ერთი შეხედვით, ალბათ, ცოტა
უცნაურია, მაგრამ ჩვეულებრივი.
მე ვაპირებ ვთქვა, რომ იმ ფონზე, ფერი ამ გვერდზე უნდა იყოს მწვანე.
და ეს არის, სამწუხაროდ, ერთგვარი არ არის საუკეთესო დიზაინი.
გაითვალისწინეთ, რომ ადრე მსოფლიოში HTML,
მე ვთქვი, რომ ატრიბუტები არის ეს ძირითადი ღირებულება წყვილი.
რაღაც შეადგენს გაცემა unquote "რაღაც".
მსოფლიოში CSS, რომელიც შექმნილია რამდენიმე განსხვავებული ადამიანი,
მათ გადაწყვიტეს, რომ მათი მსოფლიოში, ძირითადი ღირებულების წყვილი
იქნება სიტყვა colon რაღაც.
ასე რომ, ეს იგივე იდეა, თუმცა.
ეს ასოცირების მნიშვნელობა არის გარკვეული, რომ როგორმე
გავლენას ახდენს ქცევის ამ გვერდზე.
>> და თქვენ ალბათ ვხვდები.
რა არის ეს, ალბათ აპირებს უნდა გავაკეთოთ თუნდაც თქვენ არასდროს
ჩანს HTML და CSS ადრე?
აუდიტორია: ფონის ფერის შეცვლა.
დევიდ ჯ Malan: ჰო, შეცვლა ფონის ფერი.
და კონკრეტულად ფონის ფერი ორგანო.
მაგრამ იმდენად, რამდენადაც სხეულის ახლა არის ვებ
page-- ეს არის ერთადერთი ქვემოთ სათაური ბარი ნამდვილად
ეს, ალბათ, აპირებს გავლენას ახდენს იგივე.
ასე რომ, ვნახოთ.
გადავარჩინოთ ეს.
აქ და განაახლეთ.
ეს არის საკმაოდ იყოს.
და რა ხდება აქ არის გვერდითი ეფექტი.
მე უბრალოდ აირჩია ეს სურათი შემთხვევით.
რატომ არის მწვანე არ რომლითაც გაჯერებულია უკან Mickey?
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ზუსტად.
გამოდის, რომ გამოსახულება, საკმაოდ ბევრი ყველა გამოსახულებები, რომ ჩვენ შეიძლება გამოვიყენოთ,
ყველა მართკუთხედის ოთხკუთხედს.
მაშინაც კი, თუ Mickey აქვს მოსახვევებში თავად და აქვს ფონზე,
ამ ფონზე უნდა იყოს რაღაც.
ეს უნდა იყოს თეთრი.
ეს უნდა იყოს შავი ან რაღაც.
ეს შეიძლება იყოს გამჭვირვალე.
და სინამდვილეში, მე ვერ გახსნა Mickey Mouse აქ
ამ პროგრამის მოუწოდა Photoshop ან რამე მსგავსი
და შეცვალოს ყველა რომ თეთრი ფონზე გამჭვირვალე,
ასე რომ, მწვანე ბრწყინავს მეშვეობით.
მაგრამ ეს არის ის, რაც მე უნდა ვთხოვო თავს ან გრაფიკოსი
და დიზაინერი, ჩემი კომპანია, მაგალითად,
ამის გაკეთება, განსაკუთრებით მას შემდეგ, რაც მე უბრალოდ ნასესხები ეს ერთი ინტერნეტში.
მაგრამ ეს რატომ ხდება ეს.
>> ასე რომ, რა შეიძლება ჩვენ გვინდა გავაკეთოთ?
ასევე, ჩვენ ალბათ მინდა ვთქვა, რომ ჩვენ იმედი მაქვს, რომ თქვენ ისარგებლოს თქვენი ყოფნის.
და აქცენტი, მინდა იმისათვის, რომ ეს ძლიერი,
და ასე რომ მე ვთქვა ღია ძლიერი და close ძლიერი და შემდეგ განაახლეთ.
და ეს ცოტა რთულია ნახე პროექტორი
მაგრამ, ალბათ, ნამდვილად არის გადასვლა out at თქვენ ცოტა მეტი.
ასე რომ თქვენ შეგიძლიათ კურსივით ამ გზა, თამამი მოსაპირკეთებელი ამ გზით.
ჩვენ შეგვიძლია შევცვალოთ ფერები.
სინამდვილეში, უბრალოდ ჩათვლით, მე ვარ ვაპირებ წავიდეთ წინ და ამის გაკეთება.
მე ნამდვილად არ მინდა, როგორ ჩემი აბზაცში ამ მჭიდრო ერთად,
ასე რომ, შესაძლოა რაიმე ამის მსგავსი.
მე ვაპირებ ვუთხრა ბრაუზერის, შეცვლა პუნქტი აქვს აქვს,
ვთქვათ რეალურად, თქვენ იცით, რა, მოდით უერთდებიან text-align, ცენტრი.
ისევ და ისევ, მე ვიცი, ეს მხოლოდ იმიტომ, რომ ვიღაცას ისწავლება ეს ჩემთვის
და მე ვუყურებ მას up ონლაინ მითითება.
ნება მომეცით გადარჩენა ეს.
და, ah, ახლა მე ორიენტირებული იმიჯი არსებობს.
და სინამდვილეში, თქვენ იცით, რა, თუ მე გადაადგილება ჩემი გამოსახულების პუნქტის
tag-- ისე მესამე პუნქტში, მიუხედავად იმისა, რომ ეს არ არის ტექსტი.
გადავარჩინოთ, რომ და განაახლეთ.
ახლა გვერდი იწყება გამოიყურებოდეს სახის of-- ვგულისხმობ, ის ჯერ კიდევ საკმაოდ მახინჯი,
მაგრამ მაინც ეს ჰგავს გავატარე ორი წუთის ნაცვლად ერთი წუთით
რაც მას.
>> ასე რომ, თანდათან, შეგვიძლია ეს ესთეტიკური ცვლილებები ახლა გვერდი?
მე ნამდვილად არ შეცვლილა მონაცემები გვერდზე გარდა დასძინა სიტყვა ნამდვილად.
მე დასძინა მეტადატის, თუ გნებავთ.
Hey, ბრაუზერი, რათა სიტყვა "ნამდვილად" თამამი.
მაგრამ მონაცემები არ არის ძლიერი.
სწორედ მეტადატის.
მონაცემები "ნამდვილად".
ასე რომ, ჩვენ ჯერ კიდევ აქვს გარკვეული იგივე ცნებები, როგორც ადრე.
ახლა, რა თქმა უნდა, ეს არ არის ინტერნეტში, ასე რომ, მე ვაპირებ, რომ ერთი საბოლოო ნაბიჯი აქ.
>> მე ვაპირებ წასვლა hello.html და უბრალოდ ხაზი გავუსვა და გადააკოპირეთ ეს.
და ახლა მე ვაპირებ წასვლას Cloud9, რომელიც
მე ფეხით თქვენ მეშვეობით რაღაც მომენტში.
და შანსები თქვენ მალე, თუ არა უკვე, ეკრანზე მოსწონს ეს.
და ნება მომეცით უბრალოდ მოგცემთ სწრაფად ტური რა Cloud9 რეალურად არის.
ასე რომ კიდევ ერთხელ cloud 9 ამ Cloud დაფუძნებული მომსახურება
რომელიც გაძლევთ და მე ილუზია რომ ჩვენი საკუთარი ვირტუალური მანქანა
ღრუბელი, ტექნიკურად კონტეინერის ღრუბელი,
რომ ჩვენ გვაქვს სრული ადმინისტრაციული პრივილეგიები.
ამ თეორიის მიხედვით, არც ერთ სხვაგან მსოფლიოში აქვს
ხელმისაწვდომობის ეკრანზე ვარ ეძებს ახლავე,
გარდა იქნებ ადამიანი რომელიც აწარმოებს საიტი,
იმიტომ, რომ ტექნიკურად მათ აქვთ ფიზიკური ხელმისაწვდომობის და სხვ.
>> ასე რომ, რა ჩვენ ვხედავთ ამ გარემოს?
მე ვაპირებ დააშორებს, იმიტომ, რომ ეს პატარა პატარა.
და ნება მომეცით აღვნიშნო მეტი აქ მხოლოდ ერთი წუთით.
მარცხენა მხარეს ჩემი და თქვენი ეკრანზე, არსებობს ფაილი ბრაუზერში მარცხენა.
ასე რომ, მსგავსი სულისკვეთებით to Mac OS და Windows.
ეს არის ყველა ფაილი ჩემს ანგარიშზე.
და იყოს, თუ თქვენი ანგარიში, როგორიც ჩემია,
დაინახავთ და მალე ვხედავ helloworld.html და readme.md.
მეტი აქ უფლება, ეს არის სადაც ჩემი ტექსტური ფაილი ვაპირებთ წასვლა.
თუ თქვენ ოდესმე გამოიყენება Microsoft სიტყვა ან Notepad ან TextEdit,
ეს არის სიტყვა, ჩემი რედაქტირების ფაილი აპირებს წავიდეს.
და შემდეგ ყველაზე arcane თვისება ამ გარემოში
რომ ჩვენ ნამდვილად არ უნდა გამოვიყენოთ არის ქვემოთ აქ მოუწოდა Terminal ფანჯარა.
თუ თქვენ უკვე გამოიყენება DOS ეხლა წარსულის, ეს არის Linux
ან Linux ეკვივალენტს DOS.
ეს არის ტექსტური interface-- არ მაუსის დაწკაპუნებით, არ გადმოიყვანა.
ყველა შეგიძლიათ გააკეთოთ აკრიფოთ ბრძანებები, მაგრამ იმ ბრძანებები
შეგიძლიათ შექმნათ ფაილი ნაბიჯი ფაილი, ღია საიტები ახლოს, დირექტორიები,
ამის ნებისმიერი რაოდენობის რამ.
მაგრამ ახლა, ჩვენ უბრალოდ მოვახერხოთ დრო აქ.
>> ასე რომ, მოდით ეს.
თუ თქვენ ამ გარემო, რომელიც თქვენ უნდა
იქნება, თუ ის, სამუშაო უკვე, წავიდეთ წინ და მერე
ფაილი, New მომენტში.
და რომ მოგცემთ ახალი tab უფლება აქ შუა.
და მე უბრალოდ და მოდით წავიდეთ წინ და ამის გაკეთება.
მოდით წავიდეთ წინ და ახლა არ ფაილი, შენახვა და წავიდეთ წინ და მას hello.html,
არ უნდა აგვერიოს helloworld.html, რომელიც
მოვიდა თქვენი ახალი უფასო ანგარიში, რომელიც არის მხოლოდ ნიმუში ფაილი.
თქვენ ნახავთ, რომ მოულოდნელად გამოჩნდება, სავარაუდოდ, მარცხენა მხარეს,
და tab მაინც იყოს ღია.
და ნება მომეცით გარწმუნებთ ახლა ხელახლა ეს ფაილი ან რამდენიმე ვარიანტი შესახებ.
და თუ ვერ საკმაოდ დანახვა ეკრანზე, ეს იდენტურია სლაიდები
რომ თქვენ ალბათ სხვა tab.
>> მოკლედ, თქვენი პირველი ვებ გვერდი, გადარჩენა მას, და მერე რაღაც მომენტში,
მე გაჩვენებთ, თუ როგორ შეიძლება რეალურად ნახოთ ეს.
მაგრამ შეიცვალოს მინიმუმ ერთი რამ.
შეცვლა HelloWorld to რაღაც საკუთარი არჩევანი,
ასე რომ თქვენ დარწმუნებული ვარ, რომ ეს არის თქვენი ფაილი და არა უბრალოდ შეიქმნა.
კარგი.
და როდესაც თქვენ ready-- არსებობს rush-- როდესაც თქვენ მზად,
წავიდეთ წინ და შენახვა ფაილი ერთხელ თქვენ გააკეთა ეს ცვლილებები.
და თუ თქვენ დააჭირეთ აწარმოებს ღილაკს ზედა, ამ
უნდა გახსნას ახალი tab, რომელიც გითხრათ თქვენ რა URL შეგიძლიათ თქვენი ფაილი,
მაგრამ ეს შეიძლება მიიღოს მომენტში შეთავაზება unquote "დაიწყოს Apache", რომელიც
არის სახელი სერვერზე.
ასე რომ, ფრთხილად უნდა გააკეთოს ზუსტად რა არის ფაილი საბოლოოდ.
ასე რომ, ახლა, მე გასადიდებლად.
თუ დავიწყო აკრეფით ღია bracket HTML, ცნობა
ის რითაც მე დასრულდება ჩემი აზრის.
და თუ მე დასრულდა ჩემი აზრის, ავტომატურად მაძლევს დახურვის ტეგი.
მაგრამ მოლოდინი მაშინ მე მოხვდა შეიყვანეთ და შემდეგ გადაადგილება შიგნით არსებობს
და უხელმძღვანელებს შიგნით და შემდეგ გავაკეთო სხეულის შიგნით.
და ეს ცოტა უცნაურია, პირველ რიგში, რადგან ის აკეთებს სამუშაოს,
მაგრამ გვესმის, რომ საბოლოო ჯამში, ეს დაზოგავს თქვენს keystrokes.
და სინამდვილეში, ძალიან გავრცელებული თვისება პროგრამირების გარემოში ამ დღეებში
როგორც ვებ განვითარების მოსწონს ამ და ფაქტობრივი პროგრამირების,
რომელიც ჩვენ ვსაუბრობთ იმაზე, ხვალ, არის ამ ავტოდასრულება თვისებები,
რამ, რომ საშუალებას მისცემს პროგრამისტი ან დიზაინერი
აკრიფოთ ნაკლები keystrokes to შესრულებისკენ იგივე.
ზოგჯერ კარგია, თუმცა.
ზოგჯერ უბრალოდ შემაშფოთებელი.
და კიდევ ერთხელ, ერთხელ თქვენ ჩაიწერება სლაიდ ან რამდენიმე ვარიანტი მისი,
თქვენ შეგიძლიათ დააჭიროთ Run ღილაკს ზედა.
და შემდეგ ქვედა window, თქვენ უნდა ეცნობოს
რა URL შეგიძლიათ თქვენი ვებ-გვერდზე.
Mine, მაგალითად, არის business-daharvard.c9users.io
და ასე შემდეგ.
ყველა უფლება, ასე რომ, ნება მომეცით რაიმე შეკითხვა?
რაიმე სხვა შეკითხვები მხოლოდ მისაღებად ეს სამუშაო, სანამ ჩვენ დაამატოთ თვისებები?
და ნება მომეცით შესთავაზოს, უბრალოდ მიიღოს ეგ comfortable--
იმიტომ, რომ ეს არის ერთ ერთი რამ, რომ მხოლოდ ასლი პასტა ბრმად, რასაც მე ვაკეთებ.
მაგრამ ასე რომ ეგ ჭიდაობა მინიმუმ ერთი to-do,
მე ვაპირებ ჩართოთ ზოგიერთი მუსიკა.
მე ვაპირებ შესთავაზოს სია რამ შეიძლება პოტენციურად დაამატოთ.
და თქვენ რა თქმა უნდა გამოიყენოს Google.
და რატომ არ ჩვენ უბრალოდ ვთავაზობ, რომ თქვენ ცდილობენ მოგვარება
მინიმუმ ერთი კონკრეტული პრობლემა აქ.
ამიტომ თვალსაზრისით tags, მიადევნე თვალი reuse ეს აქ.
>> ფაქტობრივად, ნება მიბოძეთ ეს ტექსტური სახით.
მოდით ვთქვათ, რომ მათ შორის tags ჩვენ შეგვიძლია გამოყენება აქ არის გარკვეული tags აქ.
ჩვენ ვნახეთ პუნქტი აქვს.
ახლა ის აპირებს ავტოდასრულება.
ე მუხლის მე tag, წამყვანმა აქვს.
მოდით ვთქვათ გსურთ რათა რაღაც უფრო დიდი,
ასე რომ თქვენ შეიძლება მოსწონს მალები tag შეიძლება დაეხმაროს.
ისე, თქვენ შეიძლება უნდა გარკვეული დახმარება რომ რაღაც მომენტში.
ჩვენ ვნახეთ div.
დაინახავთ, რომ იქ მაგიდასთან.
რაღაც მოუწოდა tr, td.
ე, td.
დაბრუნებას, რომ ამ მომენტში.
რა შეიძლება იყოს მოსახერხებელი?
არსებობს ძლიერი.
იქ აქცენტი, უფრო სწორად em.
There's-- სხვა რა შეიძლება თქვენ მიეცით აქ?
ისე, ჩვენ მიიღოს შევხედოთ, რომ ერთად.
ფორმა, რომელიც ჩვენ ვნახეთ.
არსებობს ფორმა.
იქ შემავალი და რამდენიმე სხვა.
ყველა უფლება, ასე რომ, მოდით ეს.
პასუხის გაცემა ვიქტორია კითხვაზე, ნება მომეცით პირველი
უბრალოდ დარწმუნდით, რომ ყველას შეუძლია მიიღოს მათი მიესალმები სამუშაო.
მაშინ ნება მომეცით წარმოგიდგინოთ რამდენიმე სხვა იდეები.
მაშინ ჩვენ ნება ეგ გადაჭრა ზოგიერთი პრობლემა საკუთარი.
მაშინ ჩვენ რეალურად დაბრუნდება რომ ცნება ფორმა,
და ჩვენ, ფაქტობრივად, ხელახლა განხორციელება ერთად წინა ბოლომდე ინტერფეისი,
ასე ვთქვათ, for Google თავად.
ჩვენ ვიყენებთ Google უკან ბოლომდე და მოდით მათ ამის გაკეთება შრომა, ძიება,
მაგრამ ჩვენ ხელახლა ფრონტზე ბოლომდე Google და ძებნის ფორმა
რომ მათ აქვთ საკუთარი ვებ-გვერდი.
ასე რომ, ჩვენ დავბრუნდებით ეს tags რაღაც მომენტში.
>> ასე რომ, ეს იყო ის, რაც მე შემოთავაზებული მხოლოდ ერთი წუთით წინ.
ჩვენ შეგვიძლია დავამატოთ სტილიზაცია, რომ გვერდი შიგნით ამ სტილის tag,
და ჩვენ შეგვიძლია stylize ფონზე ფერი, ტექსტი განვიხილეთ,
არის თუ არა ეს ცენტრი ან მარცხნივ ან მარჯვნივ.
მაგრამ ძალიან სწრაფად თქვენ ამას იპოვოს და ვებ დიზაინერი
ნახავთ, რომ ეს ხდება პატარა unwieldy,
იმიტომ, რომ თქვენ აკეთებს რა მოუწოდა შერევით შინაარსი
პრეზენტაციას შესახებ.
თქვენ შერევას თქვენი მონაცემები და ესთეტიკას შესახებ.
და სინამდვილეში, თუ გავითვალისწინებთ, რა მოხდება, მეტი time--
ეს არის ძალიან პატარა ვებ გვერდზე, რა თქმა უნდა.
მაგრამ თუ მე დაამატოთ შინაარსის ამ გვერდზე და მე დაამატოთ სტილი ამ გვერდზე,
გვერდზე ძალიან სწრაფად იღებს აღარ და აღარ და აღარ.
და ვარაუდობენ, რომ მინდა მეორე ვებ გვერდზე, რომელიც
იზიარებს ზოგიერთი ატრიბუტები.
დავუშვათ, რომ ჩემი მეორე ვებ გვერდზე ჩემი site-- ასევე, მინდა ყველაფერი ცენტრი,
და მე მინდა, ყველაფერი მწვანე ფონზე.
მე საკმაოდ ბევრი აპირებს უნდა დააკოპირეთ და ჩასვით ზოგიერთი ხაზები
შევიდა, რომ მეორე ფაილი, რომელიც თავს კარგად გრძნობს.
ეს იქნება ამ პრობლემის მოსაგვარებლად.
>> მაგრამ რა, თუ მე მინდა მესამე გვერდზე ან 30 გვერდზე ან მე -40 გვერდზე?
ახლა მე ვაპირებ იყოს გადაწერა და pasting ბევრი დუბლიკატი კოდი
სხვადასხვა ფაილი.
ასე რომ, ვფიქრობ, რომ მე გადაწყვიტოს და მე განუცხადა,
hey, ჩვენ არ იყენებთ მწვანე ფონზე მთელი მსოფლიოს მასშტაბით.
ჩვენ ვაპირებთ, რომ დაიწყოს გამოყენებით ფორთოხალი.
რა უნდა შეიცვალოს?
ისე, თქვენ უნდა შეცვალოს, რომ სტილი მწვანე ნარინჯისფერი რამდენი ადგილებში?
ისევე როგორც 30 ან 40 ადგილებში.
ეს არის tedious.
ეს მიდრეკილება შეცდომა.
არსებობს მთელი რიგი მიზეზების გამო სადაც თქვენ არ მინდა, რომ გამოიწვიოს
რომ სახის ტკივილი თავს.
და ასე იქნება, არ იქნება ლამაზი თუ შეიძლება, რაც მე
ბოლო შორის ამ ორი ყვითელი tags, ამ სტილის tags,
ფაქტორის, და ამით ყველა ჩემი სტილიზაცია ერთ ცენტრალური ფაილი
რომ ყველა 30 ან 40 ჩემი სხვა ფაილი სესხება ან როგორღაც მითითებას,
არ არის განსხვავებით ქსელის დიაგრამების ვაკეთებდით ადრე?
>> ასე რომ, თუ მე აქ ვარ, აპირებს რეალურად შესთავაზოს
რომ შევცვალოთ სტილი აქვს რაღაც
მოუწოდა ბმული tag, რომელიც არის horribly, horribly დაასახელა,
იმიტომ, რომ თქვენ არ გამოიყენოს ბმული ტეგი რა
ჩვენ, ადამიანები, ვიცი როგორც ბმული ამ ვებ-გვერდზე.
ის, რომ თქვენ გამოიყენოთ, რომელიც აქვს?
როგორ შევქმნათ ბმული ამ ვებ გვერდზე?
აუდიტორია: a.
დევიდ ჯ Malan: a, ან წამყვანმა tag, რომ წავიდა Disney ადრე.
ბმული tag აქ ამბობს, ამას ბმული ფაილი სახელად
styles.css, ურთიერთობა, რომელიც იქნება, რომ ეს ჩემი სტილების.
ასე რომ, ეს არის ერთ-ერთი S ს CSS-- კასკადური სტილების.
სტილი sheet-- ორი S ს CSS.
კასკადური სტილის ფურცელი.
ეს მხოლოდ იმას ნიშნავს, hey, ბრაუზერი, წასვლა მოვძებნოთ styles.css ადგილობრივ სერვერზე
და გამოიყენოს იგი როგორც თქვენი სტილების, რაც იმას ნიშნავს, შიგნით რომ ფაილი
იქნება ყველა stylizations, რომ ჩვენ უბრალოდ გაკეთდეს.
და მერე რა, რომ ფაილი შეიძლება გამოიყურებოდეს ეს.
და მე უბრალოდ ეს არის სწრაფი მაგალითად, იმიტომ, რომ ჩვენ არ უნდა
მისაღებად ძალიან ბევრი სარეველა აქ.
მაგრამ თუ მე გადააკოპირეთ ეს, რაც მე სთავაზობდა ის არის, რომ პროგრამისტი შექმნათ ახალი ფაილი,
ჩასვით იმ ხაზები whoops-- ჩასვით იმ ხაზები,
გადარჩენა, როგორც styles.css, და შემდეგ, სხვა ფაილის წაშლა ყველა იმ
და შეცვალოს იგი ნაცვლად ეს რგოლი აქვს.
ასე რომ, თუ მე ბმული href = "styles.css", ურთიერთობა უნდა იყოს "სტილების"
ჭდის.
შეინახე.
დაბრუნდეს ჩემი HelloWorld.
განაახლეთ.
>> ფაქტიურად არაფერი მომხდარა.
ეს კარგია, რადგან ეს იმას ნიშნავს, რომ პრაქტიკულად ყველა სამუშაო.
იმის დასამტკიცებლად, რომ ისევე, ვფიქრობ, რომ ტექსტის არასწორი ფრაგმენტი და მოვუწოდებ ამ "styles.css"
კაპიტალის S, რომელიც არის არასწორი და შემდეგ განაახლეთ.
ახლა თქვენ ხედავთ, რომ ეს უბრალოდ არ მუშაობს.
ახლა, რატომ?
ისე, მოდით გამოვიყენოთ ტექნიკა ადრე.
ნება მომეცით წავიდეთ წინ და, ჩემს ბრაუზერში, Chrome, მე ვარ
ვაპირებ გახსნას, რომ სპეციალური ქსელის tab, როგორც ადრე,
და ნება მომეცით განაახლეთ გვერდი.
რას არ უკვირს ახლა?
ან იქნებ თქვენ უკვირს მას.
ასეა თუ ისე, რას ხედავთ ახლა?
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ეს არ არის ნაპოვნი.
რატომ არ არის ნაპოვნი?
ისე, Styles.css-- კაპიტალი S-- არ არსებობს.
მე misnamed იგი.
მარტივი typo.
მაგრამ მე მისაღებად გასაგები მიზეზების ახლა 404, იმიტომ, რომ სერვერზე ამბობდა, hey,
ეს არ არის ნაპოვნი.
ფაქტიურად, მე არ ვიცი, სადაც ეს ფაილი.
ასე რომ, როგორც შედეგი, ბრაუზერის აჩვენებს, თუ რა შეუძლია,
ნედლეული შინაარსი გვერდზე, რომელიც იყო 200, HTML,
მაგრამ სტილიზაცია არ შეუძლია დაემატოს შემდეგ.
და ეს არის ის, რაც იგულისხმება კასკადური.
შეგიძლიათ სახის დაამატოთ ეს შემდეგ, და ეს ერთგვარი
აღადგენს ესთეტიკის ვებ-გვერდზე.
და თქვენ კი override იმ სტილის კიდევ სხვა სტილების ფაილი
თუ გინდა.
ეს არ არის ნაპოვნი, თუმცა, ამ შემთხვევაში, იმის გამო, რომ, რა თქმა უნდა, მე misnamed იგი.
ასე რომ, მე უნდა დააფიქსიროს, რომ პირველი.
>> მოდით წავიდეთ წინ და შესთავაზოს შემდეგ.
მოდით წავიდეთ წინ და ამის გაკეთება.
დაწყებული ალბათ თქვენი HelloWorld ფაილი,
ნება მომეცით მოიწვიოს რამდენიმე მხატვრული წინადადებები.
ასე რომ, Victoria, თქვენ სურდა რამდენიმე ტექსტი უფრო დიდი, არა?
ყველა უფლება, ასე რომ ჩვენ შეგვიძლია არ მიიღოს ტექსტი დიდია.
და ჩვენ თითოეულ pluck off მხოლოდ ერთი პრობლემის გადაჭრა.
ჩადება ტექსტი დიდია.
მე არ ვაპირებ შეწუხება წერა ამ, როდესაც ჩვენ
აქვს ტყვია ტექნოლოგია სწორედ აქ.
ასე რომ, გარკვეული პრობლემები.
ასე რომ, ჩვენ ვაპირებთ, რომ ცდილობენ რათა ტექსტი დიდია.
კარგი.
რა იქნებოდა ვინმეს შესთავაზოს?
რა შეიძლება ჩვენ გვინდა უნდა გავაკეთოთ, რომ ვებ გვერდზე?
მოდით ამუშავება მოკლე სიაში რამ
და შემდეგ დელეგატი ჯგუფი გაერკვნენ ამ გარეთ.
>> აუდიტორია: [INAUDIBLE]
>> დევიდ ჯ Malan: OK, პოზიცია ტექსტი სხვადასხვა მხარეს გვერდზე?
კარგი.
კიდევ რაღაც.
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ეს არის.
ასე რომ, gif მხოლოდ სხვადასხვა ფორმატში.
ჩვენ უბრალოდ გამოიყენება, რაც, png ან jpg ალბათ?
ჩვენ გამოიყენება jpg.
თუ გაინტერესებთ, გადამეტებული პასუხი თქვენს კითხვაზე
არის jpg ზოგადად გამოიყენება ფოტოები, იმიტომ, რომ ის მხარს უჭერს
მილიონობით ფერის ან 24-bit ფერი.
Gif ზოგადად გამოიყენება, როგორც, ინტერნეტ memes ამ დღეებში ანიმაცია,
როგორიცაა ანიმაციური GIFs.
მაგრამ ეს ხდება გამოიყენოს მცირე ფერი პალიტრა, მხოლოდ 256 შესაძლო ფერები,
მაგრამ იგი მხარს უჭერს გამჭვირვალობისა და ანიმაცია.
და შემდეგ იქ png, რომელიც მხარს უჭერს გამჭვირვალობისა და მეტი ფერები
მაგრამ არა ანიმაცია.
ასე რომ, ეს ვაჭრობის საგანი.
ასე დასძინა gif, თუმცა, იქნება ფუნქციურად
ექვივალენტურია დასძინა png ან jpg.
ჰო.
სურათის წყარო უდრის.
ასე რომ რაღაც.
მოდით ამუშავება, რომ ჩვენ გაგზავნილი Victoria გავაკეთოთ აქ.
>> აუდიტორია: დამატება ღილაკების ფორმა.
დევიდ ჯ Malan: OK.
ასე რომ დაამატოთ ღილაკების ფორმა.
და ჩვენ ყველაფერს გავაკეთებთ, რომ ერთ-ერთად.
ასე რომ, უნდა იყოს სრულყოფილი segue მას შემდეგ, რაც ამ გამოწვევას.
რაიმე სხვა?
რა შეიძლება გსურთ ამის გაკეთება?
ვებ გრძნობს ძალიან underwhelming თუ ეს ყველაფერი შეგვიძლია.
აუდიტორია: შეცვლა ფერი ტექსტი.
დევიდ ჯ Malan: შეცვლა რა?
აუდიტორია: ფერი ტექსტი.
დევიდ ჯ Malan: შეცვლა ფერი ტექსტი.
კარგი.
ასე რომ, მოდით გავაკეთოთ ეს.
მხოლოდ ერთხელ ისე, რომ თქვენ არა, უბრალოდ მიერ მოყვანილი, აკეთებს ზუსტად რასაც მე ვაკეთებ,
მე ვაპირებ ჩართოთ მუსიკა შესაძლოა, ხუთ წუთში აქ.
მობრძანდით, რათა გამოიყენოთ Google.
მობრძანდით, მკითხავთ, და მე ჩუმად მინიშნება თქვენს ყურში.
მობრძანდით, გამოიყურება მეტი სხვისი shoulders.
მაგრამ გადაჭრა მხოლოდ ერთი ასეთი პრობლემები.
მაგრამ ჩვენ ყველაფერს გავაკეთებთ, რომ ბოლო ერთი, აყალიბებს ერთი, თუ შესაძლებელი იქნებოდა, ერთად.
ასე რომ, ხუთ წუთში გადაწყვეტს ერთი ასეთი პრობლემა
Google- ის გამოყენებით, ინტუიცია, ან სხვა საშუალებებით ხელმისაწვდომი.
>> [მუსიკის დაკვრა]
კარგი.
არ აწუხებს, თუ გსურთ შენარჩუნება tinkering,
მაგრამ მე გააფუჭებს რამდენიმე ეს პასუხი.
ასე რომ, პირველი წინადადება ვიქტორია იყო, რათა ტექსტი დიდია.
ასე რომ, არსებობს რამდენიმე გზა ამის გაკეთება.
მე გაკეთებული აღდგენილია ჩემი ეკრანზე ამ ზომის,
მიუხედავად იმისა, რომ მე მიახლოება ხელოვნურად მხოლოდ ვხედავ რამ.
და მოდით ეს.
ნება მომეცით წავიდეთ წინ და დაიბრუნოს ზოგიერთი generic ლათინური ტექსტი
უბრალოდ, ასე რომ, ჩვენ გვაქვს რაღაც მუშაობა.
ასე რომ მე მხოლოდ ერთი წუთით.
მე სამი პუნქტებში.
კარგი.
ეს იქნება უკეთესი მაგალითი.
ასე რომ, საინტერესო, in ჩემი hello.html, უბრალოდ
გაკრული სამი nonsensical ლათინური პუნქტები
უბრალოდ, ასე რომ ჩვენ გვაქვს რაიმე ტექსტი მუშაობა.
და ვიქტორია მიზანი იყო რათა ზოგიერთი ტექსტი დიდია.
ასე რომ, მე, როგორც ადრე, წავიდეს აქ.
და ნება მომეცით ამის გაკეთება სწორი გზა.
მე ვაპირებ აქვს ბმული tag, რომელიც მიუთითებს, რომ ფაილი
სახელწოდებით "styles.css," ურთიერთობა რომლის კიდევ ერთხელ "სტილების".
და შემდეგ მე ვაპირებ გადარჩენა, რომ და ქმნის ამ "styles.css".
>> ასე რომ, როგორც ადრე, მაქვს უნარი ამ CSS ფაილი
რეალურად override ნაგულისხმევი ესთეტიკის ვებ გვერდზე,
და default ესთეტიკის, რა თქმა უნდა, საკმაოდ მოსაწყენი.
ეს არის ერთგვარი ნორმალური შრიფტის ზომა, შავი ტექსტი, თეთრ ფონზე, და სხვ.
ასე რომ, ვფიქრობ, მე მინდა, რომ ეს ტექსტი დიდია.
მე ვერ გავაკეთებ რამდენიმე რამ.
ჩემი styles.css ფაილი, მე შეიძლება ითქვას, იცით, რა,
ვრცელდება შემდეგი სხეულის ჩემს გვერდზე.
წავიდეთ წინ და მიიღოს შრიფტის ზომა 24 ქულა,
რომელიც არის მთელი რიგი მე შეიძლება გამოყენება Microsoft Word.
ნება მომეცით დაბრუნდეს ჩემი ვებ გვერდი აქ და განაახლეთ,
და თქვენ ხედავთ, რომ ეს უკვე გაცილებით დიდია.
და ჩვენ შეგვიძლია პატარა გიჟები, ისევე, როგორც ჩვენ შეგვიძლია წლის desktop--
რათა ის 96 ქულა.
განაახლეთ.
და ის მიღების პატარა უზარმაზარია ამ ეტაპზე.
>> მაგრამ შეიძლება იყოს უფრო ზუსტი.
გამოყენების ნაცვლად, ამ სტილების ორგანოს ჩემი გვერდი,
რა შეიძლება მე გამოიყენოს ეს ნაცვლად, სხვა რა აქვს, რომ შესაძლოა, ჯერ კიდევ
ფუნქცია იგივე გზა?
>> აუდიტორია: p tag?
დევიდ ჯ Malan: P აქვს.
ამიტომ ხელმძღვანელი არ იქნება სწორი, იმიტომ, ხელმძღვანელი,
თქვენ შეგიძლიათ რეალურად არ კონტროლი ესთეტიკას.
არსებობს ან ტექსტი იქნება თუ არა.
მაგრამ p tag-- შემიძლია ჩაყვინთვის პატარა ღრმა, ასე ვთქვათ, პირველი პუნქტის
tags.
და მიუხედავად იმისა, რომ არსებობს სამი, რომ შესანიშნავად ჯარიმა, რადგან CSS,
როდესაც მე, უბრალოდ, ვამბობთ "ჟ", ამ ნიშნავს გამოიყენონ შემდეგი
ნებისმიერი tag, რომელიც შეესაბამება ამ selector, არჩევის მხოლოდ
რომ სახელი აქვს.
ასე რომ, სადაც ხედავთ "ჟ", ვრცელდება შრიფტის ზომა,
და მოდით, რათა ის უფრო გონივრული ერთხელ 24 წერტილი.
და იცით რა, მხოლოდ კარგი ღონისძიება,
მოდით ფერი red მხოლოდ მომენტში.
და ახლა თუ მე განაახლეთ, ახლა ჩვენ სამი მახინჯი პუნქტები.
>> მაგრამ ახლა ვფიქრობ, რომ მე ერთგვარი of-- მინდა პირველი პუნქტის
გადმოხტა at შესახებ.
მე არ მინდა, რომ მხოლოდ გაზრდის შრიფტის ზომა ყველაფერი.
ასე რომ, მე რეალურად მინდა იდენტიფიცირება და გამოირჩეოდნენ შორის ამ პუნქტებში.
მოდით დავაღწიოთ წითელი, იმიტომ, რომ ის უბრალოდ სახის tacky,
და მოდით წავიდეთ წინ და მიიღოს შრიფტის ზომა 12-პუნქტიანი ჩვეულებრივ,
ასე რომ, ჩვენ უკან რაღაც ცოტა უფრო გონივრულად.
და ახლა მინდა, რომ გაიზარდოს შრიფტის ზომა პირველი პუნქტით.
მე შემიძლია ამის გაკეთება რამდენიმე გზები, მაგრამ ერთი გზა, რომ
ალბათ ყველაზე სასწავლო ზე მომენტში არის ამის შემდეგ.
ნება მომეცით წავიდეთ წინ და აცხადებენ, რომ ეს პუნქტის აქვს უნიკალური ID "პირველი".
მე ვერ ვუწოდებ ამ არაფერი მინდა.
მე ვერ ვუწოდებ ამ "foo" ან ნებისმიერი სხვა სიტყვა,
მაგრამ მე ვაპირებ მისცეს მას სემანტიკურად მნიშვნელოვანი სახელი
როგორიცაა "პირველი".
ეს არის უნიკალური იდენტიფიკატორი, პირადობის, ჩემი პირველი პუნქტის შესაბამისად.
>> რა შემიძლია გავაკეთო ჩემს სტილების არის ცოტა უფრო ზუსტი.
იმის ნაცვლად, რომ, ვრცელდება შემდეგ, რათა p tag,
შემიძლია ვთქვა, რომ ასეთია ვრცელდება შემდეგ,
ან აირჩიეთ, HTML ელემენტი რომ აქვს უნიკალური ID "პირველი".
რა მინდა უნდა მიმართონ მას?
შრიფტის ზომა 24 პუნქტი.
ასე რომ, მე მაქვს ორი სელექციონერები ახლა.
ერთი ხდის ყველა მე-12-პუნქტიანი.
მაგრამ ეს ერთი, განსაკუთრებით მას შემდეგ, რაც საქმე second-- საქმე ბოლო წელს ფაილი
ეს კასკადური ეფექტი.
მე, უბრალოდ, ყველა ჩემი პუნქტის tags 12-წერტილი,
მაგრამ ეს ახლა კასკადები და გადაფარავს, რომ ნებისმიერი ელემენტები
ამ გვერდზე, ნებისმიერი ტეგით გვერდზე, რომლის უნიკალური ID გაცემა unquote "პირველი".
და hashtag ამ კონტექსტში უბრალოდ ნიშნავს "უნიკალური იდენტიფიკატორი".
მე არ დააყენოს ის HTML ფაილი.
მე, მეტი აქ, უბრალოდ, ვამბობთ, პასუხის unquote "პირველი".
>> ნება მომეცით, განაახლეთ.
და ახლა მე ვხედავ, ah, OK.
ვგულისხმობ, ეს არ არის, რომ საკმაოდ, მაგრამ ეს ერთგვარი
მოსწონს წინასიტყვაობა, რომ წიგნი ან რამე მაგდაგვარს,
სადაც პირველი პუნქტით მეტია.
შეიძლება იყოს კიდევ უფრო ზუსტი ერთად მხოლოდ პირველი ასო, მაგრამ მაინც
მე ახორციელებს უფრო კონტროლი.
ახლა maybe-- იქნებ მე მინდა ამის გაკეთება, ზოგჯერ სხვადსხვა მიზეზის გამო,
და მე არ მინდა, რომ ეს ვრცელდება მხოლოდ ერთ HTML tag.
იმის ნაცვლად, ვთქვათ მოდით ასევე ამის შემდეგ.
Class = "იმპორტი".
ხოლო ID გამოიყენება ცალსახად იდენტიფიცირება ერთი რამ, tag,
თქვენს ვებ გვერდზე, კლასი ნიშნავს, რომ გამოიყენება ნებისმიერი რაოდენობის ელემენტები და tags
თქვენს ვებ გვერდზე.
ასე რომ, ეს reusable.
პირადობის არ არის reusable.
კლასი არის reusable.
>> და იცით რა, სხვადსხვა ფილოსოფიური reasons--
მე არ დასრულდება ჩემი thought-- მე ვაპირებ ვთქვა
რომ პირველი პუნქტით და მეორე პუნქტი მნიშვნელოვანია.
ამიტომ, მე ვაპირებ, რომ ვრცელდება კლასის მოუწოდა "მნიშვნელოვანია", რომ, თუ მე გადარჩენა ჩემი ფაილი
და განახლება, არ ფუნქციური გავლენა ამჟამად.
მაგრამ მე დასძინა, ზოგიერთი მეტამონაცემები ფაილი,
ერთგვარი რაღაც ცალკე საწყისი ძირითადი მონაცემები ფაილი,
ასე რომ, ახლა ჩემი სტილების, თუ მე ნაცვლად ამბობენ, ".მნიშვნელოვანი" - თქვენ იცით,
არაფერი, რომ მნიშვნელოვანია, მე ვაპირებთ, რათა font-ფერი, red--
უფრო სწორად არ font-ფერი, უბრალოდ ფერი.
არსებობს შეუსაბამობები სოციალურ მეცნიერებათა ცენტრის სამწუხაროდ.
და ჩატვირთვა.
ახლა შეამჩნია პირველი ორი პუნქტის წითელი
მაგრამ არა მესამე, იმიტომ, რომ მე მხოლოდ გამოყენებული კლასს "მნიშვნელოვანი"
პირველი ორი იმ რამ.
>> ასე რომ, პირადობის მოწმობები, თქვენ გაქვთ შესაძლებლობა მიუთითოთ ძალიან ზუსტად.
კლასების, თქვენ უნდა reusability.
მაგრამ ორივე შემთხვევაში, შეამჩნია ერთგვარი კარგი დიზაინის პრინციპი
სადაც მე factored გარეთ ყველა ესთეტიკის ჩემი styles.css ფაილი.
ასე რომ არ არსებობს messiness აქ.
იქ არის ნახსენები წითელი ან თამამი წინაშე და შრიფტის ზომა ამ ფაილის.
პირიქით, მაქვს სემანტიკურად, მნიშვნელოვნად ხასიათდება ჩემი მონაცემები, როგორც,
აქ არის რამდენიმე მნიშვნელოვანი მონაცემები.
აქ არის კიდევ რამდენიმე მნიშვნელოვანი მონაცემები.
უფრო მეტიც, აქ არის "პირველი" ჩემი მნიშვნელოვანი მონაცემები.
ასე რომ, HTML ყველაფერი არის ერთგვარი of tagging, ფაქტიურად, სიტყვა
და მე და აშენებს თქვენს გვერდი ამ პატარა მინიშნებები, თუ
იქნება, რომ თქვენ შეგიძლიათ რატომღაც ბერკეტები გამოყენებით
სხვა ტექნიკას, როგორიცაა CSS ამ გზით.
>> ასე რომ, პასუხი Victoria კითხვაზე, ჩვენ შეგვიძლია ტექსტი დიდია, რომ გზა.
არსებობს უამრავი სხვა გზა, მაგრამ შრიფტის tag-- ღია bracket "font" -
რეალურად რამდენიმე წლის.
და ეს არის პრობლემა, ძალიან, ეყრდნობოდა მხოლოდ
ონლაინ resources-- ისინი, როგორც წესი, მოძველებულია.
და მართლაც, რომ უკვე მოძველებულია, იმიტომ, რომ მსოფლიო მიხვდა,
რას ნიშნავს "font-size = 7" ნიშნავს?
ეს არ არის.
ასე რომ, მრავალი წლის განმავლობაში და ამ day-- ერთ მხარეს
აღნიშნავს, აქ არის ის, რომ, ფაქტობრივად, წარმოუდგენლად მტკივნეული მაინც ზოგჯერ
განავითაროს საიტები ინტერნეტში, რადგან Microsoft
და Google და Mozilla და სხვები ხშირად არ ვეთანხმები, თუ როგორ
ინტერპრეტაცია დაზუსტება HTML.
>> არსებობს rulebook for HTML, რომ ზოგადად ამბობს, რაც თითოეული tag ნიშნავს.
მაგრამ ზოგჯერ ეს არ ნიშნავს, რომ განხორციელების შეხედულებისამებრ,
Microsoft- ის შეხედულებისამებრ და Google.
და ასე რომ თქვენ ძალიან ხშირად ნახე ნახვა რაღაც
გამოიყურება სხვადასხვა კომპიუტერი ვიდრე ეს იმას on Mac,
და ეს მართლაც იმიტომ, ბოლოს დღეს,
მათ არ შეამოწმოთ ეს ასევე ორივე პლატფორმების.
მაგრამ ასევე იმის გამო, გონივრული, ჭკვიანი ხალხი არ ვეთანხმები
და კომპანიების არ ვეთანხმები, და ასე ერთ-ერთი გამოწვევაა პროგრამირების
ვებ და პროექტირება რამ ვებგვერდი
წერილობით თქვენი ვებ გზა რომელიც მუშაობს ყველა ბრაუზერში.
მაგრამ მაშინაც კი, რომ დაუსაბუთებელი, უფლება?
არსებობს ძალიან ბევრი ვერსიები ამდენი ბრაუზერები არსებობს, რომ რაღაც მომენტში,
თქვენ ასევე უნდა მიიღოს გადაწყვეტილება ზარი და თქვენ უნდა გადაწყვიტოს, როგორც კომპანია,
განსაკუთრებით ელექტრონული კომერციის სტილის საიტები, სადაც თქვენ
ცდილობს გამოიყენოს უახლესი და უდიდესი ტექნოლოგიები, რათა ძალიან კარგი შესახებ
გამოცდილება.
მაგრამ გარკვეული პროცენტული თქვენი მომხმარებლების შეიძლება კვლავ გამოყენებით Internet Explorer 6 ან 7
ან 8, განსაკუთრებით დამოკიდებულია ქვეყანა, რომ ისინი მოდის.
>> ასე რომ, ძალიან ხშირად კონსულტაცია არის რაღაც
როგორიცაა "ბრაუზერში სტატისტიკა."
და თუ ჩვენ წასვლა ვნახოთ Wikipedia და ვხედავ, როგორ up-to-date ეს სქემა არის
თუ არსებობს ერთი.
ასე რომ, აქ თქვენ შეგიძლიათ ნახოთ სადაც ბრაუზერები რეალურად
არიან, შესაბამისად 2015 წლის, შესაბამისად, აშშ-ს მთავრობა.
Chrome არის 42% საბაზრო წილი, რასაც მიერ IE დიდწილად კორპორატიული პარამეტრები
ან PC პარამეტრები, რა თქმა უნდა, მოჰყვა Firefox,
მაშინ Safari, მაშინ Opera არ საქართველოს რუკა აქ რატომღაც,
და შემდეგ სხვა.
იქნებ ის ქვეშ სხვა.
მაგრამ უფრო პრობლემატურია, ვიდრე, რომ არის ვნახოთ, თუ Wikipedia ასევე აქვს
ვერსიებს ბრაუზერები version--
>> წამო ბრაუზერის სტატისტიკა.
IE.
მიუხედავად იმისა, რომ ეს არ არის საკმარისი.
Browser სტატისტიკა.
ჩემი ვერსია.
ეს არ იქნება სწორი.
ვნახოთ, ვერსიები.
Browser წილი.
მოდით ვნახოთ, თუ ეს საქმე.
კარგი.
ახლა ეს ხდება ცოტა უფრო სასარგებლოა.
ასე რომ, აქ, შეამჩნია, რომ ჩვენ გვაქვს ყველა სხვადასხვა ვერსიებს ბრაუზერები.
და, ღმერთო ჩემო, თუ look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
ვგულისხმობ, ბრაუზერები უფრო განახლებული, და ხანდახან ზოგიერთი იმ ცვლილებებს
არის მნიშვნელოვანი თვალსაზრისით ფუნქციონირება.
ასე რომ, რაღაც ეტაპზე, პროდუქტის მენეჯერები და ინჟინრები
უნდა მიიღოს decision-- თქვენ იცით, რა, მხოლოდ 1% მსოფლიოს
კვლავ გამოყენებით IE 7.
ჯოჯოხეთი მათთან.
ჩვენ უბრალოდ არ აპირებს მხარს ვუჭერთ, რომ ბრაუზერში.
და რას ნიშნავს ეს, რომ არ შეიძლება?
ეს იმას ნიშნავს, რომ ღილაკები არ მუშაობს თქვენს ვებ გვერდზე,
ან ის შეიძლება ნიშნავდეს გაფორმებით სრულიად off.
ან თქვენ შეიძლება უნდა მიიღოს რომ იგივე გადაწყვეტილება ზარის
მობილური ამ დღეებში, სადაც, ჩვენ არ აპირებს მხარი დაუჭიროს IOS 5 აღარ.
ასე რომ, ადამიანი უბრალოდ უნდა განახლება.
და ჩვენ არ ვაპირებთ, რომ მხარს ვუჭერთ Cupcake on Android OS Android მოწყობილობები,
იმიტომ, რომ world-- როგორც ტექნიკური მსოფლიოს სურს წინსვლა,
ეს ერთგვარი სურს გადაიტანეთ მსოფლიოში ისე, რომ ისინი არ
უნდა გავაგრძელოთ, რათა იყოს უკან თავსებადი, რათა მათ
შეგვიძლია შემოგთავაზოთ ახალი და კარგი თვისებები.
ეს არის ერთ-ერთი მიზეზი, რატომ ამდენი კომპანიები მოძრავი out
ავტომატური განახლება და ერთგვარი იძულება უახლესი ვერსიები პროგრამული უზრუნველყოფა ჩვენთვის.
და მაშინაც კი, კომპანიები როგორიცაა Apple იქნება დასალაგებლად
აიძულოს თქვენ თითქმის ან აიძულოს თქვენ თვალსაზრისით საბაზრო ძალები
ყიდვა ახალი ტელეფონი, რადგან ისინი უბრალოდ არ განაახლოთ თქვენი ძველი ტელეფონი აღარ.
ასე, რომ თქვენ გამოტოვებთ წლის უახლესი და ყველაზე დიდი თვისებები,
იმიტომ, რომ ეს ძვირადღირებული, როგორც კომპანიის შენარჩუნება ძველი, ალბათ,
inferior ვერსიები პროგრამული უზრუნველყოფა.
მაგრამ წმინდა ეფექტი არის, რომ ჩვენ ასევე განიცდიან ამ ისევე.
>> მოდით შევხედოთ მხოლოდ რამდენიმე საბოლოო რამ აქ.
მოდით დაარტყა off რეალური სწრაფად ზოგიერთი იმ სხვა ტყვიები, თუ აინტერესებს.
ასე რომ, თუ თქვენ ცდილობენ, მაგალითად, პოზიცია
ტექსტის სხვადასხვა მხარეს გვერდი, მე ვაპირებ, რომ ერთი სწრაფი გზა,
მაგრამ არსებობს სხვადასხვა გზები ამით.
ნება მომეცით წავიდეთ წინ და eliminate-- გაამარტივებს ამ ასეთია.
ნება მომეცით დაბრუნდეს ჩემი მარტივი, მარტივი პუნქტებში.
ნება მომეცით დაბრუნდეს ჩემი styles.css.
და მე უბრალოდ აპირებს გამოიყენოს simple-- რომელიც თქვენ შეიძლება არ ჩანს Google
ან გავიხსენოთ ადრე text-align უფლება.
და ამ გვერდის გადატვირთვა.
ახლა ყველაფერი, როგორც ჩანს, უნდა იყოს მარჯვენა მიუერთდა,
როგორც თქვენ შეიძლება ნახოთ ოვერჰედის აქ.
>> ჩვენ შეგვიძლია, რათა ის გამოიყურება ცოტა მეტი წიგნის მსგავსი, და შეიძლება ითქვას, "გაამართლოს"
და ჩატვირთვა.
ახლა ეს არის ლამაზი და მოედანზე ორივე მხარეს, რომელიც სახის ლამაზი.
კიდევ ერთი გოლი, რომ ჩვენ გვქონდა აქ იყო ცვლილება ფერი ტექსტი.
ამიტომ, ჩვენ ვნახეთ, რომ ჩემი წითელი ტექსტი.
და ახლა დაამატოთ ღილაკების ფორმა.
რატომ არ ვცდილობთ, რომ ზუსტად ეს?
მაგრამ პირველი ნება მომეცით წასვლა საიტი, რომელიც ყველაზე მეტად ჩვენს გამოიყენოთ ყოველ day-- Google.
და მოდით შევხედოთ როგორ Google რეალურად მუშაობს.
მაგრამ მე ვაპირებ ამის გაკეთება.
პირველი ნება მომეცით ამის გაკეთება შიგნით yep, ნება მომეცით წასვლა Google პირველი.
მე ვაპირებ უნდა წავიდეს Google- ის პარამეტრები,
იმიტომ, რომ მე მინდა გამორთოთ რაღაც მოუწოდა მყისიერი შედეგი.
>> ასე რომ თქვენ შეიძლება არ შენიშნა Google ამ დღეებში ნება მომეცით დაბრუნდეს
და იქაური ეს.
ასე რომ თუ დავიწყებ ძებნას for "კატა", როგორც ეს,
შეამჩნია, რომ არა მარტო მივიღებ ავტოდასრულება up
დაბრუნება, უეცრად, გვერდზე თავად როგორც ჩანს, შეცვალოს საკმაოდ სწრაფად, ასევე,
და რომ Google გამოყენებით ენა მოუწოდა JavaScript ცდილობს იყოს სასარგებლო.
მაგრამ, სამწუხაროდ, ეს ერთგვარი of ერევა ჩვენი დისკუსია
რა ხდება რეალურად ქვეშ hood აქ.
ასე რომ, მე მხოლოდ სახის სწრაფად გამორთეთ მყისიერი შედეგი.
და მე ვაპირებ დააჭირეთ Save.
და ახლა მე ვაპირებ გახსნა რომ დიაგნოსტიკური პანელი, რომელიც მე
შენარჩუნება გახსნის ფარგლებში ქსელის tab.
ასე რომ, მოდით ეს.
ნება მომეცით whoops-- გადახვევა ქვემოთ ცოტა.
და ნება მომეცით მოძებნოთ "კატა".
>> და ახლა შეამჩნია, ფაქტობრივად, ეს არის კარგი შესაძლებლობა,
განიხილოს ერთი წუთით.
ყურადღება მიაქციეთ იმ მომენტში მე type-- შეჩერება.
შეწყვიტე.
კარგი.
ყურადღება მიაქციეთ მომენტში მე აკრიფოთ წერილი C, უყუროთ ბოლოში ეკრანზე.
A- თ S. რას ბოლოში ამ ეკრანზე, ჩემი ქსელი tab,
ვარაუდობენ, ხდება ყოველ ჯერზე მე აკრიფოთ წერილი?
სამწუხაროდ, ბაყაყი ძალიან გადატანის დღეს ან SHAMROCK
ან რასაც ის არის.
რა ხდებოდა ყოველ ჯერზე მე აკრეფილი?
და ნება მომეცით გარკვევა ბუფერული და აკრიფოთ ისევ.
So-- whoops.
ყოველ ჯერზე მე აკრიფოთ წერილი, C- A- ტ ასე რომ, ახალი ზედიზედ აშკარად ინარჩუნებს გამოჩენა.
რას თითოეული იმ სტრიქონების წარმოადგენს, საფუძველზე, რაც ჩვენ ვნახეთ და
დღემდე?
აუდიტორია: ძიება?
დევიდ ჯ Malan: ძებნა, ან უფრო generically, HTTP მოთხოვნის
ჩემი ბრაუზერზე სერვერზე.
ისე, რატომ არის ჩემი ბრაუზერის მიღების HTTP მოითხოვოს ყოველ ჯერზე მე აკრიფოთ წერილი?
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ჰო, ის მიცემის ჩემთვის ეს განცხადება სრული შედეგები.
ისევე, სად ეს ძებნის შედეგები მოდის?
ისე, ყოველ ჯერზე მე აკრიფოთ წერილი, Google პოლკები
და უფრო და უფრო სიტყვა მე ბეჭდვის.
რატომ?
იმის გამო, რომ მათ სურთ, რომ მომეცი უკეთესი და უკეთესი, უკეთესი წინადადება,
სიაში წინადადებები, რა სიტყვა ვცდილობ რეალურად სრული.
ასე რომ, ეს არის, რომ ფაქტიურად ყოველ ხასიათი თქვენ ჩაწერეთ შევიდა Google
მიმდინარეობს გაგზავნილი, საბოლოოდ ნაყარი, არამედ ზოგჯერ ერთი
იმ დროს, რათა განახორციელონ ეს განცხადება სრული ფუნქციები, როდესაც
მონაცემები, რა თქმა უნდა, ინტერნეტში.
>> ახლა, მოდით, შევხედოთ, თუ რეალურად რა ხდება, როდესაც მე დააწკაპუნეთ Google ძებნა.
და მაშინ ჩვენ ბერკეტები ამ თავს.
ასე რომ, თუ მე გადახვევა ქვემოთ ახლა ძალიან პირველი მოთხოვნა, რომ მოხდა.
შეამჩნია შემდეგ.
იყო გამოგზავნილი საკმაოდ ხანგრძლივი ამას URL https://www.google.com/search?
და შემდეგ მთელი bunch of პერსონალი.
ვნახოთ ეს რეალურად ახლა ბრაუზერის tab თავად.
მოდით, თავი დაეღწია პანელი აქ.
აი გვერდზე ძებნის შედეგები.
და შეამჩნია აქ URL.
ახლა, თქვენ ალბათ შეუძლია გამოიცნოს რა ხდება აქ ნაწილი.
ასე რომ, პირველ რიგში, განმარტება.
როგორც ჩანს, ეს არის დანიშნულების სადაც სახით არის წარმოდგენილი.
ასე რომ, როდესაც მე აკრეფილი სიტყვა "კატები" და Enter,
როგორც ჩანს, Google გაგზავნილი ჩემი ტექსტის შეყვანა ამ URL
რომ მე ხაზგასმით იქ, ხაზი ძებნა.
გამოდის, URL, არაფერი რომ მას შემდეგ, რაც კითხვის ნიშნის არის,
როგორც ჩვენ შენარჩუნება ამბობდა, საკვანძო ღირებულება წყვილი რომ იყო აკრეფილი შევიდა ფორმა ან როგორღაც
გადამდები ბრაუზერი სერვერზე.
>> ასე რომ, ნებისმიერ დროს თქვენ აკრიფოთ input ფორმა ინტერნეტში
და ეს იგზავნება როგორც ჩვენ ვსაუბრობდით, მეშვეობით მისაღებად,
ერთ-ერთი ასეთი ვირტუალური კონვერტები, შინაარსი
რომ envelope-- დიახ, შენარჩუნება მიღების ფუნქციონირებს ფიზიკურად
შევიდა კონვერტში კლასში დღეს, მაგრამ ტექნოლოგიურად
ეს რეალურად დააყენა URL.
ასე რომ, ფაქტობრივად, ნება მომეცით sift მეშვეობით.
სად ხედავთ მომხმარებლის შეყვანის?
სად ხედავთ რაღაც , რომ მე აკრეფილი აქ?
ჰო, ისე, "კატა".
არა?
ნება მომეცით, გამოიხადოს ეს რაღაც მარტივი.
მე ვაპირებ წაშლა ყველაფერი ამ URL, რომ მე არ მესმის,
და მე უბრალოდ აპირებს დატოვოს მას, როგორც ამას / ძიება? q = კატა.
ჩვენ დავინახავთ, სადაც q მოდის ამ მომენტში,
მაგრამ რომ იგრძნობა მინიმალური რაოდენობის ინფორმაცია, რომ მე იმ პირობით.
და ახლა მე ვაპირებ დააჭიროთ.
და შენიშნავს, რომ ჯერ კიდევ მუშაობს.
ჩვენ ჯერ კიდევ დავუბრუნდეთ მთელი bunch of cats.
ასე რომ, Google არის fancier ვიდრე ეს ამ დღეებში.
ეს არის 2016 წლის, არა 1999 წელს.
ასე რომ, არსებობს სხვა ნივთები, რომ ჩემი ბრაუზერის აგზავნის სერვერზე.
მაგრამ ეს არის მინიმალურად ყველა რომ აუცილებელია.
>> რა ხდება?
ისე, პირველი ნება მომეცით წავიდეთ წინ და წავიდეთ უკან Cloud9 და ნება მომეცით წავიდეთ წინ
და დახუროს ჩემი ჩანართები ადრე.
და მე ამ ჩემს ფლობდეს მხოლოდ ერთი წუთით.
მე ვაპირებ წავიდეთ წინ და შექმნას ახალი ფაილი.
და მე ვაპირებ გადარჩენა, როგორც google.html.
და მე ვაპირებ ძალიან quickly-- მე ვაპირებ, რომ მოიპაროს, ფაქტობრივად,
ზოგიერთი ამ ტექსტის მხოლოდ დროისა.
მე ვაპირებ ჩავსვა აქ.
მე არ ვაპირებ შეწუხება ნებისმიერი სტილიზაცია ამ დროს.
ჩვენ ვაპირებთ, რომ მოვუწოდო ამ "ჩემი Google".
და მე ვაპირებ, თავი დაეღწია ყველაფერი ორგანიზმში.
და მე ვაპირებ ამის შემდეგ.
ნება მომეცით zoom.
ფორმა action-- და როგორც მე მოკლედ აღნიშნული ადრე whoops-- როგორც მე მოკლედ
ზემოთ აღინიშნა, ქმედება ფორმა, სადაც თქვენ გაგზავნას მონაცემები.
ასე რომ, google.com/search.
და მეთოდი მინდა შეიძლება იყოს ერთი ორი რამ.
ეს შეიძლება იყოს "მიიღოს", როგორც ჩვენ შენარჩუნება განხილვისას, ან ეს შეიძლება იყოს "პოსტი".
ახლა, ფუნდამენტური განსხვავება ის არის, თუ თქვენ იყენებთ "მიიღოს"
ყველა ინფორმაცია, რომ მომხმარებლის უზრუნველყოფს იღებს გაგზავნილი URL.
>> ეს არის დიდი რამ, როგორიცაა ძიება ძრავები და რამდენიმე სხვა პროგრამები,
მაგრამ, რა გარემოებები არ მინდა შეავსოთ ფორმა
და ინფორმაცია დასრულდება მდე URL, ისევე, როგორც თქვენი ბრაუზერის სამისამართო?
რა სახის ფორმები ამის you--
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: ჰო, მსგავსი იმისა, რაც?
აუდიტორია: პაროლები.
დევიდ ჯ Malan: ჰო, ასე რომ თქვენ შეხვიდეთ in Facebook ან რამდენიმე ვებგვერდზე.
სწორედ შესახებ შეიტანენ ფორმა, ტექსტური ყუთი,
მაგრამ თქვენ ალბათ არ მინდა, რომ აჩვენებს up ბრაუზერის URL.
რატომ?
ვგულისხმობ, იქნებ არსებობს გარკვეული უსაფრთხოების თვალსაზრისით ქსელში,
მაგრამ more-- მინდა, უფრო მარტივად, რა, თუ თქვენი roommate, თქვენი მნიშვნელოვანი სხვა,
თქვენი ბავშვებისათვის, თქვენი მეუღლე გამოიყურება თქვენი ბრაუზერის ისტორია?
არსებობს თქვენი პაროლი უფლება იქ ბრაუზერის ისტორიაში.
რომ არ იგრძნონ კარგი დიზაინი.
ან კიდევ უფრო ტექნიკურად, ვარაუდობენ, რომ თქვენ ცდილობთ
ატვირთეთ ფოტო Flickr ან Facebook ან wherever--
რომელიც არის მომხმარებლის input, მიუხედავად იმისა, რომ ეს ცოტა უფრო interesting-- როგორ
შემიძლია cram იმიჯი URL ბარი?
თქვენ სახის ერთგვარი არ შეუძლია.
თქვენ სახის შეუძლია.
მაგრამ, სინამდვილეში, მე მძიმე დაპრესილი წარმოსადგენია აკეთებს, რომ.
ასე რომ, მე უნდა კიდევ ერთი მეთოდი ფოტოების ატვირთვა ნახვა,
და რომ სხვა მეთოდი ეწოდება "პოსტი".
მაგრამ ახლა, ჩვენ უბრალოდ ვსაუბრობთ "მიიღოს", რომელიც არის მარტივი ორი.
ეს მხოლოდ აყენებს ყველა მომხმარებლის შეყვანის URL.
>> ასე რომ, აქ სახით მე შექმნაში.
მინდა შეყვანა.
და იცით რა?
მე ვაპირებ მიიღოს ვხვდები აქ.
მე ვაპირებ, რომ გავიხსენოთ, ჩემი input "q" for "შეკითხვაზე".
და მე ვფიქრობ, რომ ეს არის ერთ-ერთი ორიგინალური დიზაინის, შესაძლოა, 1999 წელს.
და მაშინ ტიპის ამ შეყვანის უბრალოდ აპირებს იყოს "ტექსტი".
და შემდეგ მე ვაპირებ, რომ კიდევ ერთი input რომელიც არ უნდა სახელი, როგორც ჩვენ მალე
ვხედავ, ტიპის, რომელიც "წარუდგენს."
და ამ აპირებს მომეცი სპეციალური ღილაკი.
და ეს არის ის.
>> ნება მომეცით წავიდეთ წინ და შეინახოთ ეს ფაილი.
მე ვაპირებ დავუბრუნდე ჩემს ბრაუზერის და გადადით google.html.
შევა.
და ეს არის ერთგვარი იშვიათი რბილად რომ ვთქვათ.
მაგრამ ნება მომეცით წავიდეთ წინ და ძიება "კატა".
და შენიშნავს, მე ვარ ამჟამად ამ Cloud9 URL.
მაგრამ ამ მომენტში მე დააჭირეთ, სად იმედი მაქვს, თქვენ დასრულდება up?
>> აუდიტორია: Google.
>> დევიდ ჯ Malan: Google.
მოდით დაწკაპეთ წარუდგინოს.
და მართლაც მე ხელახლა განხორციელდება Google.
არა?
ეს არის მარტივი.
ეს მსუბუქია.
ვგულისხმობ, ჩემი კოდი აშკარად უკეთესია, ვიდრე მათი, საწყისი სასადილო ჩვენ ვნახეთ ადრე.
და იცით რა?
მე ვაპირებ spice ამ ცოტა.
მე არ უხსენებია ეს ადრე.
არსებობს tags როგორიცაა H1, სასაქონლო 1, ყველაზე მნიშვნელოვანი სათაურს ამ გვერდზე.
"ჩემი Google," მე მოვუწოდებ ამ.
მიადევნე თვალი განაახლეთ.
ის ეძებს ცოტა უკეთესი უკვე.
და, ფაქტობრივად, იცით, რა?
მე already-- მე ცრუობს.
მე ვუთხარი, რომ არ აპირებს სტილი ეს, მაგრამ მე ვაპირებ სტილი ამ, როგორც ადრე.
და ჩემი სხეული იქნება, ვთქვათ, ტექსტის გასწორება ცენტრი.
ის ეძებს უფრო მოსწონს Google უკვე.
>> მე უნდა ხაზი შესვენება, თუმცა, რომ ღილაკს.
და აღმოჩნდება, თქვენ შეგიძლიათ გამოიყენოთ პუნქტები,
ან შეგიძლიათ უფრო სიტყვასიტყვით უბრალოდ, ვამბობთ, მომეცი ხაზის შესვენების აქ ბანკ აქვს.
და თუ მე განაახლეთ ეს, ახლა მიდის იქ.
ეს არის პატარა მახინჯი, ასე რომ მე შეიძლება ამის მრავალი ხაზის წყვეტები,
მაგრამ მოდით არ მიიღოთ ძალიან ხარბ აქ.
ასე რომ, ახლა ვნახოთ, თუ ეს მუშაობს "ძაღლები".
როგორც ჩანს, მუშაობა "ძაღლი", ისევე.
რა არის მყარი takeaway აქ?
One-- არ იყო დიდი ნახტომი წარმოგიდგინოთ კიდევ რამდენიმე tags,
როგორიცაა ფორმა აქვს შეყვანის tag.
მაგრამ უფრო ფუნდამენტურად არის, რომ ყველა ვაკეთებთ
მივიჩნევთ, ჩვენი აზრით, of HTTP და ის ფაქტი,
რომ ფორმები საბოლოოდ შეცვალოს რა არის ამ URL ბრაუზერი,
და ასე, აქედან გამომდინარე, ჩვენ შეგვიძლია მექანიკურად შეყვანის სერვერზე
მიერ მიღების HTML ფორმა და იცის რომ სერვერზე ესმის HTTP,
ისევე, როგორც ჩვენი სხეულის ესმის, ისევე, შერყევისკენ ჩემი მხრივ, რომ იგივე ოქმი,
და ამიტომ ჩვენ დავუბრუნდეთ პასუხი რომ ჩვენ საბოლოოდ ველოდოთ.
>> მოდით ცდილობენ, რომ ერთი ბოლო რამ ახლა მობილური,
და მე make-- დავძენ ეს კოდი სლაიდები.
ასე რომ, თუ გსურთ Tinker, თქვენ რა თქმა უნდა, მას იქ.
მაგრამ მე ვაპირებ წასვლა წინ და ერთი რამ.
მე ვაპირებ წავიდეთ წინ და გახსენით ჩემი ინდექსი page--
ჩემი მიესალმები გვერდზე, როგორც ადრე, რომელიც აქვს ბევრი ეს ცრუ-ლათინური ტექსტი,
და უაზრო ლათინური ტექსტი, და has-- როგორც ჩანს, ეს ამ შრიფტის ზომა.
მაგრამ ნება მომეცით წავიდეთ წინ და ამის გაკეთება.
მე ვაპირებ წასვლას Cloud9.
და თქვენ არ უნდა გავაკეთოთ ეს ნაბიჯი.
მე უბრალოდ ამას თავს.
მე ვაპირებ დააჭირეთ გაზიარება.
და ეს არის ფუნქცია მარტო Cloud9, რომლის
მე შემიძლია ჩემი გარემო საჯარო.
>> და მხოლოდ გულისთვის დემონსტრირება, ნება მომეცით ამის გაკეთება.
მე ვაპირებ, რომ ჩემი განცხადება საჯარო.
გაითვალისწინეთ ის აფრთხილებდა მე ვარ მე დარწმუნებული ვარ, მე მინდა ამის გაკეთება,
იმიტომ, რომ ეს ხდება, რათა ყველას მსოფლიოში, თუ არა ისინი აქ და ახლა
ან თვალს ვიდეო მოგვიანებით ინტერნეტ ნახოს რა მე ვერ ვხედავ.
მაგრამ ეს კარგია.
მე ვაპირებ ვთქვა "შესრულებულია".
და ნება მომეცით გარწმუნებთ, თუ მე ამ correctly-- მიადევნე თვალი შეამოწმოთ იგი.
წავიდეთ წინ, თუ არ mind-- ბრაუზერში თქვენს კომპიუტერში,
გადადით ამ URL, და იმედია თქვენ ნახავთ ჩემი ლათინური ტექსტი.
და იყოს ნათელი, ეს გაშვებული არა ჩემს ლეპტოპში.
ეს არის მოცული.
ეს არის ის Cloud9, ფაქტიურად, მაგრამ მე გააკეთა ჩემი სამუშაო საჯარო
ისე, რომ არავის ინტერნეტში შეგიძლიათ თქვათ ჩემი ლათინური მთავარი გვერდი.
>> წასვლა იგივე URL on თქვენი ტელეფონი, თუ შეიძლება.
თუ ეს ყველაფერს დაგიჯდებათ, თუმცა, თქვენ შეგიძლიათ უბრალოდ გამოიყურებოდეს მეტი მხრის.
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: მე ბოდიში?
აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: Just ლათინური სიტყვა.
სულ ეს არის.
მაგრამ ის, რაც თქვენ უნდა დაინახოს.
>> აუდიტორია: Yeah.
დევიდ ჯ Malan: ჰო.
ჰო.
კარგი.
ასე რომ, შეგიძლიათ გამართავს თქვენი ტელეფონი მხოლოდ ერთი წუთით?
ასე რომ, იმედია, თუ თქვენ წვდომის ის, იგი უნდა გამოიყურებოდეს თითქმის unreadable.
ეს still-- ვგულისხმობ, ეს unreadable გამო ლათინური.
მაგრამ ეს ასევე unreadable რა სხვა მიზეზი?
მსგავსად, თუ რა მოსწონთ თქვენ შესახებ?
აუდიტორია: ეს არის პატარა.
დევიდ ჯ Malan: ეს არის სუპერ, სუპერ პატარა.
ასე როგორ შეიძლება მოვაგვაროთ ეს პრობლემა?
ეს არის სუპერ, სუპერ პატარა ვიქტორია ტელეფონი
და, თუ თქვენ გამოყვანილია ის თავს, ალბათ,
პატარა თქვენი ტელეფონი, ასევე, თუ თქვენ აქვს ხელმისაწვდომობის პარამეტრები ჩართულია.
რა არის ეს?
თქვენ შეიძლება მხოლოდ pinch და zoom, რომელიც ადეკვატური,
მაგრამ შემდეგ თქვენ მხოლოდ რამდენიმე სიტყვა იმ დროს.
ასე რომ, დაველოდოთ წუთში.
მე ვიცი, როგორ დაფიქსირება ამ.
არა?
მე ვერ გამოიყენებს CSS, და მე ვერ შეცვლის შრიფტის ზომა 12 პუნქტიანი 24-წერტილი.
მაგრამ გვერდითი ეფექტი, რომ რა თქმა უნდა, იქნება ახლა,
on desktop ან ლეპტოპი, ახლა ტექსტი ორჯერ დიდი.
და ისე, რომ სახის იყოს ლამაზი განასხვავოს მოწყობილობები,
და აღმოჩნდება, რომ არსებობს გზები აკეთებს, რომ.
არსებობს რამდენიმე სხვადასხვა გზით, ფაქტობრივად,
რომლის დროსაც გამოყენებით CSS და fancier თვისებები რომ ჩვენ არ წასვლას დიდი დეტალურად,
შეგიძლიათ არსებითად შეკითხვის ბრაუზერი და ამბობენ,
თუ თქვენს ეკრანზე არის პატარა, ვიდრე ეს ბევრი პიქსელი, გამოიყენოთ ეს შრიფტის ზომა.
თუ თქვენს ეკრანზე მეტია, ვიდრე ეს ბევრი პიქსელი, გამოიყენოთ ეს სხვა შრიფტის ზომა.
>> თქვენ შეიძლება კიდევ fancier მაინც.
თუ თქვენ ოდესმე ეწვია ვებ გვერდზე, რომ, კომპიუტერში,
აქვს დიდი მენიუ იქნებ off რომ მხარეს, და შემდეგ ყველა შინაარსი
არის იმ მხარეს, რომელიც menu-- ეს ერთგვარი საერთო პარადიგმის.
მენიუ მარცხენა, შინაარსი მარჯვნივ, ან პირიქით.
ნამდვილად არ იმუშავებს მასალა, როდესაც თქვენი ეკრანზე მხოლოდ ამ ბევრი პიქსელი ფართო.
ასე რომ, უფრო გავრცელებული მასალა არის, თქვენი მენიუ იქნება მოულოდნელად მისაღებად
დაინგრა, და თქვენ უნდა დააჭირეთ ღილაკს დანახვა,
ან ნახვა დააყენებს მენიუ ზემოთ და ამით შინაარსი ქვემოთ.
და შეგიძლიათ განახორციელოს ეს რამ მრავალი გზები, ძალიან.
შეგიძლიათ თქვენი პროგრამისტების, hey, გუნდი, ნებისმიერ დროს
ხედავთ HTTP მოთხოვნის საწყისი Android მოწყობილობა, Microsoft მოწყობილობა, Google
მოწყობილობა, Apple მოწყობილობა, გამოიყენოთ ეს შრიფტის ზომა და გამოიყენოთ ეს მენიუ განლაგება,
ანდა გამოიყენოთ ეს ძირითადად უფრო დიდი განლაგებას.
>> ახლა გამოყენებით, რაც ძირითადი ტექნიკა დღეს
შეიძლება ითქვას, რომ ინჟინრები გამოიყენოთ უნდა იცოდეს თუ არა ეს
iPhone, Android ტელეფონი, ლეპტოპი, დესკტოპის გამოჩენის კომპანიის სერვერზე?
სადაც ისინი რომ ეს ინფორმაცია?
>> აუდიტორია: თავით?
>> დევიდ ჯ Malan: ჰო, HTTP header.
ასე რომ, ყოველ HTTP მოთხოვნის მოდის მათი მომხმარებელს მათი სერვერები
მოიცავს, შიგნით რომ ვირტუალური კონვერტში, მთელი bunch
of HTTP headers, რომელთაგან ერთ-ერთი ბრაუზერის და ოპერაციული სისტემა
მაშინაც კი, თუ თქვენ მზრუნველობას რომ დონეზე დეტალურად.
ახლა, ეს არის cryptic ეძებს სიმებიანი, მაგრამ არსებობს პროგრამული უზრუნველყოფა, რომელიც მხოლოდ
გამარტივება, და თქვენ შეგიძლიათ უბრალოდ ითხოვენ პროგრამირებაში code-- PHP, Java, C ++,
whatever-- რა ტელეფონი არის ამ რა მოწყობილობის ამ მომხმარებლის გამოყენებით?
და მაშინ შეიძლება ითქვას, ვაჩვენოთ ეს ვერსია ნახვა, თუ ის ტელეფონში.
ვაჩვენოთ ამ ვერსია ნახვა, თუ ის ლეპტოპი ან desktop.
მაგრამ თქვენ კი არ უნდა სერვერული სირთულის.
თქვენ შეგიძლიათ ამის გაკეთება კი მარტივი რამ.
>> მე ვაპირებ ამის გაკეთება.
მე ვაპირებ წავიდეთ წინ შევიდა ჩემი Cloud9 გარემო,
და მე ვაპირებ, რომ დაამატოთ tag რომ ვნახე Google ადრე.
ეს მოუწოდა metatag.
და არ მახსოვს, ეს ერთი, ასე რომ, მე ვაპირებ transcribe აქ.
Meta name = "ხედის ფანჯრის" და შემდეგ content = "width = მოწყობილობა სიგანე, intital
მასშტაბის = 1 "და ეს არის.
>> ასე რომ, ეს შეიძლება ასევე იყოს მოსწონს ჯადოსნური incantation.
ეს არ არის ყველა, რომ ნათელი, მაგრამ ეს რაღაც უნდა გავაკეთოთ ხედის,
და ხედის მხოლოდ ორგანოს ვებ გვერდზე, მართკუთხა რეგიონში, რომელიც
განსაზღვრავს ყველაზე გვერდზე.
და ეს უბრალოდ ვეუბნებოდი ბრაუზერი, იცით, რა?
ჩადება სიგანე ამ გვერდზე ეფექტურად ტოლია მოწყობილობა სიგანე.
სხვა სიტყვებით, არ ვივარაუდოთ, რომ თქვენ ერთგვარი შეუზღუდავი სივრცე.
ვივარაუდოთ, თქვენ მხოლოდ უნდა იმდენი სივრცე, როგორც მოწყობილობის თავად არის დიდი.
ასე რომ, ახლა, თუ განაახლეთ ეს ჩემს ბრაუზერში, მე ვერ ვხედავ ცვლილება.
მაგრამ თუ მე ამ correctly-- და მიადევნე თვალი გადაკვეთა ჩემი fingers-- თუ ყველა
განაახლეთ თქვენი ტელეფონები, თქვენ ვხედავ მყარი ცვლილება?
ჰო, ისაა, რომ
>> აუდიტორია: [INAUDIBLE]
დევიდ ჯ Malan: დიახ.
კარგი.
ასე რომ, ალბათ, უფრო იკითხება ახლა?
ჯერ კიდევ პატარა, უნდა იყოს სამართლიანი, მაგრამ არა იმდენად პატარა, რომ თავისუფლად შეიძლება უმართავი.
და მე ნამდვილად override ამ უფრო CSS ან სერვერის მხარეს,
მაგრამ სულ უფრო და უფრო, რაც თქვენ ხედავს უფრო და უფრო მეტი ფუნქციები
დაემატა კლიენტის მხარის environments--
JavaScript, როგორც ჩვენ განვიხილავთ ხვალ, CSS და HTML-- ასე
რომ ყველა ამ შეკითხვებს შეიძლება გაკეთდეს კლიენტის
ისე, რომ ადარდებს სერვერზე ბევრი ნაკლებად და არა
უნდა შეინარჩუნოს ერთად, მაგალითად, მუდმივი onslaught
ახალი ოპერაციული სისტემა ვერსიით, ახალი ბრაუზერი ვერსიები.
თქვენ არ შეგიძლიათ უბრალოდ ბრაუზერი ვთხოვთ მოწყობილობა, რამდენად დიდი ხარ,
და შემდეგ გარკვეულწილად ლოგიკური გადაწყვეტილებების საფუძველზე, რომ.
მაგრამ ჩვენ უფრო მეტი შესაძლებლობები ლოგიკური გადაწყვეტილებების
ხვალ კონტექსტში პროგრამირების ენაზე.
>> ასე რომ, ნებისმიერი კითხვები, მაშინ, ვებ განვითარება?
დღეს არ არის ვებ პროგრამირების, თითო se, მას შემდეგ, რაც ყველაფერი გავაკეთეთ
ძალიან ესთეტიკური, თუ გნებავთ.
არ არსებობს გადაწყვეტილების მიღების კოდი, რომელიც ჩვენ არ წერია,
და ამიტომაც HTML არის მარკირების ენა, არ არის პროგრამირების ენა.
მაგრამ ხვალ ჩვენ მიიღოს სწრაფი, საბოლოო ჯამში,
at JavaScript, რომელიც ფაქტობრივი პროგრამირების
ენის, რომელიც საშუალებას გვაძლევს გავაკეთოთ უფრო მეტი.
>> ნებისმიერი კითხვები?
ასევე, ნება მომეცით შესთავაზოს ორ შესაძლებლობები სურვილისამებრ დავალებას.
ერთი არის ამ Cloud9 ანგარიშებზე არ იწურება.
მობრძანდით, გამოიყენოთ მათ Tinker ერთად.
ეს არის უფასო დონის მომსახურება.
გააცნობიეროს, რომ, თუ, როდესაც შექმნა თქვენი სამუშაო გარემოს, თქვენ გახადა საჯარო,
რომ არ ნიშნავს, რომ ვინმეს ინტერნეტ ხედავთ, რა თქვენ აკრეფით.
ასე რომ, შესაძლოა, უბრალოდ მიგვაჩნია, არა მუცელზე თავს
თუ თქვენ აყენებს თქვენი პირველი ვებ გვერდი არსებობს საჯაროდ შემთხვევით,
მაგრამ არავინ არ აპირებს ვიცი, რომ შევხედოთ იქ მაინც.
>> და two-- მიადევნე თვალი toss ამ URL, ისევე,
მით უმეტეს, თუ თქვენ მოვიდა დღეს ცოტა ნაკლებად კომფორტული, ვიდრე სხვები,
იცით რა ყველა ამ პერსონალის ნიშნავს.
გააცნობიეროს, რომ ბევრად უფრო ამ ვიდეო, რომელიც ორივე კარგი გზა იძინებს
და სიცილი, ხოლო ამით, ასევე აქვს
ბევრი საზოგადოებისთვის საინტერესო და უსაფრთხოების შესაბამისი დისკუსიები
მასში ჯონ ოლივერ, თუმცა კომიკოსი.
>> მაგრამ თუ არ არსებობს დამატებითი შეკითხვები, რომ მოაქვს მიღება.
ასე რომ, რატომ არ ჩართოთ მუსიკა.
არ უნდა იყოს სასმელი და საჭმლის გარეთ.
მოხარული ვარ, რომ შეხვდნენ, როგორც სანამ ეგ მინდა,
კითხვებზე პასუხის გაცემა კიდევ ერთი-ერთზე.
მაგრამ, წინააღმდეგ შემთხვევაში, თქვენ მივესალმებით მიიღოს off ნებისმიერ წერტილში,
და ჩვენ დავინახავთ, თქვენ კვლავ ხვალ დილით ცოტა მეტი.
ყველა უფლება წყალობით.