Opprette webgrensesnitt der du skal starte

Mer enn murstein, datakode og piksler er grunnlaget for økonomien i det 21. århundre. Hvis du noen gang har sett på “Sidekilde” eller “Utviklerverktøy” i nettleseren din har du sannsynligvis oppdaget et rot av tekst, og lurte på hvordan det gjør nettsiden til å fungere.

Webutviklere ringer Graphical User Jegnterfaces (GUIer) samlet front-end av en nettside, i motsetning til back-end. Front-end er hva brukeren kan manipulere, handle med, og ellers bruke. Back-end kan betraktes som infrastrukturen som inneholder og støtter all informasjon og oppgaver implisert av fronten.

Denne artikkelen handler om fronten. Vi kartlegger territoriet slik at du får en forståelse av skillene og evnene som gjør frontendens hva det er, og viser deg hvordan du begynner å gjøre mening - og bruk - av nettutviklerens verktøy for å skape tiltalende og interaktive nettsider.

Webdesign kontra Front-End Development

I store organisasjoner er design og utvikling oppgaver utført av faggrupper med ulike ferdighetssett. Designere vil skape en bestemt visuell og interaksjonsdesign; Front-end utviklere ville implementere det.

For en person er det imidlertid ingen grunn til å begrense leting: bare fordi du er interessert i utvikling, betyr ikke at du ikke har noen visjon for design, og omvendt. En beskjeden mengde kunnskap om grunnleggende webteknologi eller designprinsipper kan vise seg å være svært gunstig i din karriere eller virksomhet.

Front-end-utvikling er både mer og mindre en kodende aktivitet. Mer fordi det er mer enn et halvt design i sin tenkning: Mange konsepter trekkes fra verden av utskriftsproduksjon. Mindre fordi når den bruker datakode, er koden en variasjon som er mindre kompleks, mer tilgivende, og krever mindre grunnkunnskaper om programmering enn andre webprogrammeringsspråk (hvorav mange finnes på baksiden) Hvilket programmeringssprog til Lær - Webprogrammering Hvilket programmeringspråk å lære - Webprogrammering I dag skal vi ta en titt på de forskjellige webprogrammeringsspråkene som driver Internett. Dette er den fjerde delen i en nybegynnere programmeringsserie. I del 1 lærte vi grunnlaget for ... Les mer .

Webens forkant: Markup, stilark og programmeringsspråk

De fleste nettsider er konstruert med en trio av teknologier: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) og JavaScript (JS):

• Markup språk liker HTML markere et dokument med tags. Tags avgrense semantisk innhold og strukturere dokumentet. Strukturerte dokumenter kan være stil.
• CSS er en stilarksprog og etterkommer av utskriftsstilretninger til en sidekomposator (som lager det endelige utskrivbare bildet for en trykkpress); På nettet dikterer CSS presentasjonen av innhold som typografi og layout generelt, samt plassering av grafikk.
• JavaScript, i motsetning til de to foregående, er a programmeringsspråk. JS håndterer interaksjon og brukerinngang, og er fokusert på hendelsene en bruker produserer. For å fylle inn bildet litt mer, er motsatt av et hendelsesdrevet paradigme en der programmeringen kjøres uavhengig av brukerinngang.

HTML

Det har vært over tjue år, og kjerneformålet med HTML forblir det samme: å skille teksten ment for en leser fra strukturen som trengs for å analysere dokumentet.

Hvorfor trenger du det

Hvorfor er HTML fortsatt viktig? For å si det enkelt, er HTML der den semantiske betydningen av innholdet ligger. Det er nødvendig for maskinlesere som søkemotorer og skjermlesere (for tilgjengelighet). Over tid er relevansen av å separere det som er semantisk versus det som er strukturelt, vokst i stedet for redusert over tid. Den nyeste versjonen av HTML (5) introduserte merker som