Sissejuhatus veebiarendust

Tagasi minu päev (Korras, enne minu päev), elukutse veebi arendaja oli väike üks. Raport tõi allpool kutsikas vihkaja, vaid eelkõige Yankees fänn skaalal professionaalne au. Kuna kõik sildid ja läbipaistvuse spacer pilte me kasutasime, me peeti toornafta häkkerite ilma ilumeelde.

Hästi, Võib veel olla puudulikud ilumeel, kuid nagu Web on arenenud nii on elukutse veebi arendaja. Nendel päevadel on lugematu tööriistad saame kasutada tegema hästi kirjutatud, standardite nõuetele mittevastava, ja ilus (Korras, võibolla mitte, et viimane) veebilehti. Enamik suured veebisaidid te kasutate täna (häbitu pistik: sh käesolev) on ehitatud kasutades neid vahendeid.

Meie kari tööriistad brauseri lõpus on võimaldanud meil luua asju veebis, mis olid mõeldamatu lihtsalt 10 aastat tagasi, nagu lugematuid sotsiaalseid võrgustikke kes väidavad, et parim viis raiska oma aega, “kuum” tech alustavatel kes väidavad, et on revolutsiooniliselt midagi, mis on juba tehtud tuhat korda, ja Angry Birds kloonid kes väidavad, et vaid veidi halvem kui originaal. Kõik veebis. Ehk need vahendid ei läinud suurim kasutusalad.

Millised on need hämmastav tööriistad Olen rääkinud? Teed on (ausalt hämmastav) keeles nimetatakse HTML5, CSS3, ja JavaScript, mis ma hüüdnimi 3 ratsanikku webocalypse. Siin on pilk iga üks:

HTML

HTML (korralikult tuntud Hypertext Markup Language; saate aru, miks inimesed, kes ei taha välja halb lihtsalt kasutada akronüüm) on keelekasutusele panema veebilehti. Paremklõpsake seda lehte ja klõpsa “Vaata Source”. See on HTML, mida see lehekülg kasutab.

Põhiliselt, HTML on hunnik tags, mis brauser tõlgendab ja näeb välja. Näiteks, vaata seda HTML koodi:

<p>Ma ei tea sinust, aga mulle meeldib vajutades nuppe.</p>

<br>

<nupp>Kliki mind!</nupp>

See HTML kood on tekst mähitakse lõikes (the <p> tag algab lõikes, the </p> tag lõpeb lõikes.) On line break (the <br>) ja seejärel nuppu klõpsates saate oma südame sisu. Sinu brauser panevad välja ekraanil teile.

Nii et kõik on hästi ja hea. Aga kui sul on midagi, kuid HTML, you get a webpage that looks like it came straight out of the 1990’s. Ei ole palju hea tuli välja, et kümne aasta jooksul niikuinii (Soengud, muusika, jne) Aga oodake! Seal on rohkem!

CSS

Teine akronüüm. Suvi. CSS tähistab Kaskaadlaadistiku, mis on veidi eksitav, sest nad tõesti ei kaskaadi (mis iganes see tähendab… see on arvuti koodi, ei juga!) CSS on keelekasutusele stiilis veebilehti. See, liiga, tõlgendab oma brauseri.

CSS ja HTML tööd kokku – HTML muudab lehe kujundus, CSS annab oma elegantsi. Kujutage maja ehitamine: HTML annab üksluine, kuid vajalik puitkarkass, CSS lisab neoon värvid ja Pentsik mööbel.

CSS on üsna lihtne keel: teatud HTML tag (nagu punktis), saab määrata väärtused eri stiili tunnid. Sinu brauser ei loe CSS ja kohaldada seda kõigi sobitamine HTML tags. Näiteks:

p {

värv: punane;

font-size: 16px;

}

Nii et iga punkt (kraami HTML <p> tags) on punane font ja olema 16 piksline. Kui olete märganud,, need on mõned sama stiile mida saab kasutada Microsoft Word ja muud taotlused.

Nüüd veebilehed on seatud ja nad näevad päris. Aga siin on asi: see on kõik nad teevad. Nad lihtsalt istuvad seal ja vaadata päris. Mis on suurepärane ja kõik, kuid kasutajad web tahavad rohkem. Nad tahavad fancy animatsioone. Nad tahavad hüpikaknad (Korras, võibolla nad tegid tagasi 2002, kuid ma põikama.) Nad tahavad nuppe, et teeme asju, kui klõpsate neid.

Umbes, et viimane – see on küsimus. Võite teha <nupp> HTML, Ja te võite klõpsata see kõik nädal, aga see ei tee midagi, igal ajal kiiresti. Kui soovite nuppu, oh ma ei tea, liikuda oma elevant üle ekraani ja rünnata midagi, then you need something more.

JavaScript

JavaScript on mitte akronüüm, kui sa ei tea,. Nad kutsusid seda JavaScript sest tundus, et programmeerimiskeelt nimega Java, mis on kummaline, sest see ei. Niikuinii, JavaScript on a proper programming language that causes all the dynamic effects näed veebis.

Nagu iga programmeerimiskeel, JavaScript on rida käske, mis teeb muutujate ja kasutada funktsioone. Cool asi JavaScript (hästi, nii lahe kui programmeerimiskeel saab) on see, et sa saaksid neid HTML elemente (nagu punktid ja nupud) ja CSS stiile (nagu värvi ja suurust) ja neid muuta. Vaata seda koodi:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – the $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (uuesti, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. See viimane rida JavaScript suhtles selle lehekülje HTML ja CSS kasutatakse stiil. See ei ole nagu need keeled on lihtsalt eri osade sama asi – Nad on ühe ja sama, teisel küljel sama hämmastav masin.

Heli põnev? Ma arvan, et see ei. See on lihtsalt osa ilu web.