Een inleiding tot web development

Terug in mijn dag (OK, voor mijn dag), het beroep van web developer was een laag een. Het hieronder gerangschikt puppy hater maar vooral Yankees fan op de schaal van beroepseer. Door alle tags en transparantie spacer beelden die we gebruiken, we werden gezien als ruwe hackers zonder enig gevoel voor esthetiek.

Goed, We kunnen nog steeds ontbreekt in esthetische zin, maar als het web heeft zich ontwikkeld zo heeft het beroep van web developer. Deze dagen zijn er talloze instrumenten die we kunnen gebruiken om goed geschreven, normen-conforme, en mooi (OK, misschien niet dat laatste) webpagina's. De meeste van de grote websites die u vandaag de dag gebruiken (schaamteloze plug: inclusief deze) zijn gebouwd met behulp van deze tools.

Onze schare van tools op het einde van de browser hebben ons om dingen te creëren op het web dat ondenkbaar waren net 10 jaar geleden, zoals talloze sociale netwerken beweren dat de beste manier om je tijd te verspillen, “heet” tech startups beweren te hebben een revolutie iets dat al duizend keer gedaan, en Angry Birds klonen die beweren alleen iets slechter dan het origineel. Alle op het web. Dus misschien deze tools zijn niet de grootste van toepassingen gegaan.

Dus wat zijn deze fantastische tools heb ik het over? Richtinggevend zijn de (eerlijk gezegd verbazingwekkend) talen genoemd HTML5, CSS3, en JavaScript, waarvan ik de bijnaam van de 3 ruiters van de webocalypse. Hier is een blik op een ieder:

HTML

HTML (goed bekend als HyperText Markup Language; kunt u zien waarom mensen die niet willen kijken slecht gewoon gebruik maken van het acroniem) de taal die wordt gebruikt om de lay-out van webpagina's. Klik met de rechtermuisknop op deze pagina en klik op “Bron weergeven”. Dat is de HTML die deze pagina wordt gebruik.

Wezen, HTML is een bos van -tags, waarbij de browser interpreteert en legt. Bij voorbeeld, kijk naar deze HTML-code:

<p>Ik weet niet over u, maar ik hou van op knoppen te drukken.</p>

<br>

<knop>Click me!</knop>

Deze HTML-code is tekst verpakt in een paragraaf (de <p> markering start een paragraaf, de </p> tag eindigt een paragraaf.) Er is een nieuwe regel (de <br>) en vervolgens een knop die u kunt klikken om de inhoud van uw hart. Uw browser zal deze lay-out op het scherm voor u.

Dus dat is allemaal goed en wel. Maar als je alleen maar HTML hebben, you get a webpage that looks like it came straight out of the 1990’s. Niet veel goeds uit dat decennium toch (kapsels, muziek, etc.) Maar wacht! Er is meer!

CSS

Een ander acroniem. Zomer. CSS staat voor Cascading Style Sheets, dat is een beetje een verkeerde benaming, omdat ze niet echt cascade (wat dat betekent… het is computercode, niet een waterval!) CSS is de taal die wordt gebruikt om webpagina's stijl. Deze, ook, wordt geïnterpreteerd door uw browser.

CSS en HTML samenwerken – HTML maakt de lay-out van de pagina, CSS geeft het zijn flair. Stel je voor het bouwen van een huis: HTML biedt de saaie maar noodzakelijke houten kader, CSS voegt de neon kleuren en eigenzinnige meubels.

CSS is een vrij duidelijke taal: voor een bepaalde HTML-tag (als een paragraaf), U kunt waarden voor verschillende stijl klassen opgeven. Uw browser zal de CSS lezen en toepassen op alle overeenkomende HTML-tags. Bij voorbeeld:

p {

kleur: rood;

font-size: 16px;

}

Dus elke paragraaf (spullen in de HTML <p> -tags) zal rood lettertype en zijn 16 pixels groot. Als u opgevallen, dit zijn enkele van de zelfde stijlen die je kunt gebruiken in Microsoft Word en andere toepassingen.

Dus nu uw webpagina's worden aangelegd en ze zien er vrij. Maar hier is het ding: dat is alles wat ze doen. Ze zitten er gewoon en zien er vrij. Die is geweldig en al, maar gebruikers van het web willen meer. Ze willen verbeelden animaties. Ze willen pop-ups (OK, Misschien deden ze terug in 2002, maar ik dwaal af.) Ze willen knoppen die dingen zal doen als je er op klikt.

Over dat laatste – dat is een kwestie. U kunt een maken <knop> in HTML, en je kunt het op de hele week, maar het is niet iets op korte termijn te doen. Als u op de knop om, oh ik weet het niet, beweeg je olifant over het scherm en de aanval iets, then you need something more.

JavaScript

JavaScript is niet een acroniem, als je afvraagt. Ze noemden het JavaScript omdat het leek alsof de programmeertaal Java, which is strange cause it doesn’t. Hoe dan ook, JavaScript is a proper programming language that causes all the dynamic effects you see on the web.

Like any programming language, JavaScript is a series of commands that make variables and use functions. The cool part about JavaScript (goed, as cool as a programming language can be) is that you can access those HTML elements (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

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

Deze JavaScript-code worden alle punten op de pagina te vinden – de $ teken vertelt de browser om alle overeenkomende elementen vinden, en de 'p’ betekent dat het nodig heeft om de leden te kiezen (herinner me de <p> element van HTML?) Dan kunt u de alinea's op te slaan in een variabele, and the command the browser to change their color CSS style to blauw.

Wat ik interessant vind (weer, Dit alles vanuit het oogpunt van een “webdev”) is hoe elegant de drie talen samenwerken. Die laatste regel JavaScript interactie met HTML-pagina's en de CSS gebruikt om het te stylen. Het is niet zoals in de volgende talen zijn slechts verschillende onderdelen van hetzelfde – ze zijn een en dezelfde, verschillende kanten van dezelfde geweldige machine.

Klinkt fascinerend? Ik denk van wel. Dat is gewoon een deel van de schoonheid van het web.