Skapa webbgränssnitt Var ska man börja

Mer än mursten, murbruk, datorkod och bildpunkter utgör grunden för den 21: e århundradetekonomin. Om du någonsin har tittat på “Sidkälla” eller “Utvecklarverktyg” i din webbläsare har du sannolikt stött på en röra av text och undrade hur det gör att webbsidan fungerar.

Webbutvecklare ringer Graphical User jagnterfaces (GUI) kollektivt front-end av en webbsida, i motsats till baksidan. Front-end är vad användaren kan manipulera, vidta åtgärder med och annars använda. Back-end kan betraktas som den infrastruktur som innehåller och stöder all information och uppgifter som antyds av fronten.

Denna artikel handlar om fronten. Vi kartlägger territoriet så att du kan förstå de skillnader och möjligheter som gör fronten vad det är och visa dig hur du börjar förstå - och använda - webbutvecklarens verktyg för att skapa tilltalande och interaktiva webbsidor.

Webdesign kontra Front-End-utveckling

I stora organisationer är design och utveckling uppgifter som utförs av professionella grupper med olika färdighetssätt. Designers skulle skapa en viss visuell och interaktionsdesign; Front-end-utvecklare skulle implementera det.

För en individ är det dock ingen anledning att begränsa din utforskning: bara för att du är intresserad av utveckling, betyder inte att du inte har någon vision för design och vice versa. En blygsam mängd kunskap om grundläggande webbteknik eller designprinciper kan vara mycket fördelaktig i din karriär eller verksamhet.

Front-end-utveckling är både mer och mindre en kodningsaktivitet. Mer för att det är mer än hälften av designen i sitt tänkande: många koncept dras från världen av tryckproduktion. Mindre eftersom det är en mängd som är mindre komplicerad, mer förlåtande och samtidigt kräver mindre grundläggande kunskap om programmering än andra webbprogrammeringsspråk (många av dem finns i backend) Vilket programmeringsspråk till Lär dig - Webbprogrammering Vilket programmeringsspråk som ska läras - Webbprogrammering Idag ska vi titta på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en nybörjare programmeringsserie. I del 1 lärde vi oss grunden till ... Läs mer .

Webbens främre ände: Markup, Style Sheet och Programmeringsspråk

De flesta webbsidor är konstruerade med en trio av tekniker: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) och JavaScript (JS):

• Markup språk gillar HTML markera ett dokument med taggar. Taggar avgränsar semantiskt innehåll och strukturerar dokumentet. Strukturerade dokument kan vara formaterad.
• CSS är en stilarksspråk och efterföljare av instruktioner i utskriftsstil till en sidkompositör (som skapar den slutliga utskriftsbara bilden för en tryckpress); På webben dikterar CSS presentation av innehåll som typografi och layout i allmänhet, såväl som placering av grafik.
• JavaScript, i motsats till de föregående två, är a programmeringsspråk. JS hanterar interaktion och användarinmatning och är inriktad på händelser som en användare producerar. För att fylla i bilden lite mer är motsatsen till ett händelsestyrt paradigm ett där programmeringen körs oberoende av användarinmatning.

html

Det har varit över tjugo år, och kärnändamålet med HTML förblir detsamma: att skilja texten som är avsedd för en läsare från den struktur som behövs för att analysera dokumentet.

Varför behöver du det

Varför är HTML fortfarande viktigt? För att uttrycka det enkelt är HTML där den semantiska meningen med ditt innehåll ligger. Det är nödvändigt för maskinläsare som sökrobotar och skärmsläsare (för tillgänglighet). Över tiden är relevansen av att skilja vad som är semantiskt kontra vad som är strukturellt ökat snarare än minskat över tiden. Den senaste versionen av HTML (5) introducerade taggar som