Web Technologies: en resa från HTML till Web 3.0

denna artikel är särskilt för de läsare som funderar på att få lite kunskap om eller är intresserade av att arbeta som webbutvecklare eller på någon annan aspekt av webben.

i den här artikeln kommer vi att fokusera på nitty-gritty av några välkända-liksom några inte så välkända – webbteknologier. Efter en snabb och enkel introduktion till webbteknik kommer vi att gå igenom grunderna för olika typer av webbteknik.

under vår diskussion kommer vi också att täcka en kort historia av webbteknik samt vissa funktioner och funktioner för varje typ av teknik som vi pratar om.

Vad Är Webbteknik?

webbtekniker är de olika verktyg och tekniker som används i processen för kommunikation mellan olika typer av enheter via internet.

för att förstå denna term på ett bättre sätt, låt oss bryta ner det i två delar: ’web’ och ’technology’.

webben hänvisar i detta fall till World Wide Web, mer allmänt känd som WWW. Det kom först till 1989 när den berömda forskaren och ingenjören, Tim Berners-Lee, kom fram till en effektiv mekanism för att dela resurser mellan forskare över hela världen.

webbkonceptet kan enkelt förklaras med hjälp av ett exempel.

låt oss anta att du letar efter en bild av en söt Lama. Du skriver ’www.google.com’ i din webbläsare. Du anger ’ söt Lama ’i sökfältet och klickar på fliken’ Bilder’. Google ger dig en uppsjö av Lama bilder som samlats in från miljontals olika källor.

efter att ha rullat lite tror du, ” Åh, jag gillar den här bilden!”Men du måste se bilden i full storlek innan du laddar ner den. Så du öppnar originalbilden och anländer till den här sidan:

Lägg märke till den röda rutan?

det är webbadressen (en typ av identifierare) för den här bilden. På samma sätt skulle varje llama-bild du tittade på ha en annan URL som skulle hjälpa till att hitta den bilden på internet.

alla dessa webbsidor, dokument och andra resurser identifieras och lokaliseras med hjälp av sina webbadresser. Dessa utgör kollektivt vad vi kallar World Wide Web.

den kunskap som du samlar om webben och hur den fungerar måste tillämpas för att bättre förstå den. För detta behöver du veta grunderna i vissa vanliga webbtekniker. För att få en bättre förståelse för webben, låt oss ta en titt på några grundläggande typer och exempel på webbteknik som vanligtvis används inom detta område.

vilka är de olika typerna av webbteknologier?

eftersom vi har ett begränsat utrymme för att undersöka det breda utbudet av webbtekniker som finns, har vi valt några som används oftast av både nybörjare och experter i branschen. Vi har delat in dem i följande avsnitt:

1. grunderna, som kommer att täcka webbläsare och vissa webbapputvecklingsgrunder
2. programmeringsspråk och ramar som används vid utveckling av webbplatser
3. databaser som används i backend för att lagra data som krävs eller samlas in av webbplatser
4. vissa protokoll, det vill säga regler för kommunikation på webben
5. grafik, audiovisuella och andra multimediaelement
6. vissa dataformat som vanligtvis används för att överföra data över Internet
7. andra diverse webbteknologier

medan vi kommer att börja med grunderna, vår diskussion kan bli lite mer teknisk i naturen när vi går vidare i artikeln.

låt oss nu gå in på detaljerna för varje komponent vi listade.

grunderna

i det här avsnittet kommer vi att prata om webbläsare och några andra webbgrunder.

webbläsare

webbläsare, ofta bara kallade webbläsare, gör det möjligt för oss att se alla resurser som ingår i World Wide Web. De är baserade på en klient-serverarkitektur. Klienten är webbläsaren i detta scenario. Du kan tänka på servern som en kombination av programvara och hårdvara som tar emot kundens önskemål och sedan skickar den begärda resursen till klienten.

när du anger en URL i en webbläsares adressfält, vidarebefordrar den din begäran till servern och hämtar och visar sedan vad användaren begärde för.

några populära webbläsare är Opera, Mozilla Firefox, Google Chrome och Safari.

Frontend vs Backend utvecklingsteknik

vad är webbutveckling?

Webbutveckling avser processen att skapa webbplatser. Denna process är baserad på ett antal steg, som vi kommer att täcka mer detaljerat när vi utforskar verktygen som är involverade i varje process.

de två delarna av en typisk webbplats

när vi går vidare kommer vi att diskutera enskilda webbutvecklingstekniker och verktyg som används för att skapa webbplatser. Men innan det måste vi vara tydliga på de två distinkta delarna av en webbplats: frontend och backend.

Frontend avser alla de delar av en webbplats som en användare kan se på sin skärm och interagera med.

Backend hänvisar till exakt motsatsen till det. Det handlar om de dolda mekanismer som gör en webbsida funktion. En vanlig användare är i allmänhet omedveten om vad som händer på backend.

olika webbtekniker används i processen för webbdesign och utveckling.

här är en kort översikt över skillnaderna mellan de två kategorierna av webbutveckling.

gränssnitt	gränssnitt
klientsidan	serversidan
webbdesign	databaser
UI / UX	servrar
vissa UI-tekniker:	vissa backend-tekniker:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Ruby
	.Netto

HTML

HyperText Markup Language, mer allmänt kallad HTML, är där WWW startade. Det är en kritisk del av alla inledande lektioner som täcker grunderna på webben. Det är ett språk på klientsidan som används för att koda frontend på en webbplats. Det hjälper utvecklare att definiera hur webbsidan kommer att struktureras, och det gör det med hjälp av element som identifieras av taggar.

här är ett mycket grundläggande exempel på en bit kod skriven i HTML:

<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! &#128513;</p></body></html>

varje objekt som bifogas parenteserna < > är ett element. DOCTYPE är dock bara en deklaration som kommunicerar till webbläsaren att det det handlar om att ladda är ett HTML-dokument. Elementet<body > definierar allt innehåll som utgör dokumentets kropp. < h1>och < p> anger början på en rubrik respektive ett stycke. < / body>, </h>och < / p> är avslutande taggar. De anger var kroppen, rubriken och stycket slutar.

i det här exemplet används stilattributet för att tilldela en viss bakgrundsfärg, teckenfärg, familj och storlek till texten. Det kan utökas ytterligare för att inkludera typsnitt (fet, kursiv, …), justering (centrum, vänster, …), etc. Andra attribut förutom stil kan också användas för att ändra element på ett liknande sätt.

(strängen av slumpmässiga tecken &#128513; i slutet av stycket är ett överraskningselement som du kan se på utmatningsskärmen nedan!)

CSS

CSS är en av de mest grundläggande webbdesignteknologierna. För att ytterligare försköna dina webbsidor kan du integrera CSS (Cascading Style Sheets) i din HTML-kod.

processen att tillämpa vissa stilar på vissa delar av din HTML-kod kan bli en repetitiv uppgift. För att spara tid och energi kan CSS användas för att effektivisera processen att utforma dina sidor över hela webbplatsen. När du har förberett en formatmall med alla standardtypsnitt, färger och andra egenskaper som är relaterade till den övergripande layouten på en webbsida kan du använda den hela webbplatsen. CSS kombineras också med Bootstrap för att designa mobila första webbappar.

programmeringsspråk och ramverk

programmeringsspråk är den mest grundläggande komponenten i skapandet av webbplatser. För att koda en webbplats måste du vara bekant med några programmeringskoncept, vissa språk och deras syntax och en bra utveckling IDE. Vissa av dessa språk kan vara allmänna, men andra är specifikt skapade för webbutveckling.

Nedan följer några exempel på vanliga webbutvecklingsspråk.

1. Java

Java skapades 1991 som ett allmänt programmeringsspråk men utvecklades långsamt för att spela en viktig roll i webbutveckling i mitten av 90-talet.

Java är välkänt på grund av några av dess fantastiska funktioner, inklusive dess

• objektorienterad natur
• portabilitet och plattformsoberoende
• enkel syntax
• Lärbarhet
• robusthet

när det gäller webbutveckling används Java vanligtvis på serversidan.

2. JavaScript

JavaScript skapades först 1995. Idag är det en favorit bland utvecklare över hela världen. Det är nu en viktig del av webbutveckling som hjälper till att skapa dynamiska delar av webbsidor.

införandet av JavaScript medförde den revolutionerande vågen av interaktiva webbsidor. Idag är införandet av grafiska element, databasintegration och övergripande dynamik på en webbplats alla möjliga på grund av JavaScript.

medan JavaScript ursprungligen introducerades som ett frontendutvecklingsspråk, blir det nu ett populärt val för backendutveckling också.

3. Python

Python har funnits i flera år men är först nyligen ökar i popularitet på grund av dess extremt lätt att lära, läsbar syntax samt dess höga produktivitet. En uppgift som kan använda 10 rader kod när den skrivs i något annat programmeringsspråk kan lätt uppnås i 2-3 rader Python-kod.

för webbutveckling på serversidan används Python ofta tillsammans med Django – eller Flask-ramarna, vilket ytterligare förenklar utvecklingsprocessen.

i år rapporterade StackOverflow att Python slog liknande Java och C när det gäller popularitet och rankade 2: a på listan över mest älskade programmeringsspråk.

4. PHP

PHP, en rekursiv akronym, står för PHP: Hypertext Preprocessor. Det är det mest populära och mest använda skriptspråket som föredras av både nybörjare och erfarna proffs inom webbutvecklingsbranschen. Det är väldigt lätt att lära sig och är helt gratis.

när den används med Apache (eller någon annan) HTTP-server på backend, PHP kan du leverera effektiva, snabba och högpresterande webbutvecklingsprojekt. Eftersom PHP har funnits i flera år och bara har blivit större och bättre finns det också omfattande stöd för utvecklare.

5. Ruby

Ruby introducerades i mitten av 90-talet och är ett kraftfullt allmänt programmeringsspråk som genom åren har blivit populärt bland backend-utvecklare. Det används ofta i samband med sin populära ram Ruby on Rails. Ruby rekommenderas särskilt för trafikintensiva webbplatser och de som kräver mycket arbete i databasänden. Det är också användbart för att skriva skalbara appar.

populära webbplatser som Twitter och Shopify byggdes med Ruby i backend.

6. Objective-C & Swift

både Objective-C och Swift är allmänna programmeringsspråk som används specifikt för att bygga appar för Apple-enheter som kör macOS och iOS.

Objective-C bygger på C medan Swift är starkt baserad på syntaxen för C++. Medan Objective-C har funnits i många fler år än Swift har, förlorar den förra långsamt anhängare eftersom den blir alltmer föråldrad. Swift förväntas gradvis ersätta Objective-C med sina mer avancerade funktioner, användarvänlighet och säkerhet. Ända sedan Swift var öppen källkod, utvecklare har använt det för webbutveckling samt.

ramar

enkelt uttryckt kan ett ramverk definieras som skelettkod. Tänk på det som en grov kontur utan fina detaljer. Ett ramverk definierar de grundläggande funktioner eller uppgifter som koden förväntas göra. Men för att berätta det specifika programmet hur man utför dessa funktioner måste du skriva några mer detaljerade, specifika instruktioner.

Låt oss ta en titt på några ramar som vanligtvis används av kodare för backend-webbutveckling, tillsammans med de språk som de fungerar bäst med. Denna lista innehåller några av de senaste webbplatsteknikerna.

Ramar	Språk
Vue.JS	JavaScript
uttrycka	nod.JS (JavaScript)
reagera.JS	JavaScript
AngularJS	JavaScript
Django	Python
kolv	Python
Laravel	PHP
Ruby på räls	Ruby
katalysator	Perl
kakao & kakao Touch	snabb

att välja bland dessa alternativ beror på dina utvecklingsbehov. Du måste bestämma vilken ram och språkkombination som bäst uppfyller dina skalbarhet, säkerhet och produktivitetskrav utan att investera mycket i att lära sig själva tekniken.

databaser

All data som utbyts på webben måste lagras någonstans. För detta ändamål har de flesta webbplatser sina egna databaser associerade med dem.

Nedan följer en lista över några databaser – vissa relationella och andra, icke-relationella – som vanligtvis används för webbapplikationer.

• MySQL
• SQL Server
• Postgres
• Oracle
• MongoDB
• Redis

dataformat

när det finns ett behov för att utbyta data mellan två enheter på webben följs en korrekt procedur. Data paketeras korrekt för överföring från källan till destinationen. Särskilda API: er (Application Programming Interfaces) är utformade och integrerade i webbplatser för bekväm datautbyte. De ordnar data på ett sådant sätt att mottagaren enkelt kan avkoda och förstå det.

nedan finns två vanliga dataformat som används i webbutveckling.

1. XML

XML står för Extensible Markup Language. Vi diskuterade syntaxen för HTML i början av den här artikeln. XML fungerar på ett liknande sätt genom att det bryter ner data i element som identifieras av olika typer av taggar. Men med XML kan du uppfinna dina egna taggar för att beskriva dina data bättre. Dessa data, när de når en webbapp eller server, kan lätt förstås och analyseras.

Låt oss titta på ett exempel på en rekord av en student, hennes biodata och hennes registrerade kurser på universitetet. Så här ser det ut som lagrat i XML:

<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>

här är huvud-eller rotnoden student. studentnamn, år och kurser är barnnoder. Man kan säga att dessa är attribut för rotnoden. Som det är fallet med HTML skrivs XML-data också mellan öppnings-och stängningstaggarna för barnnoderna.

2. JSON

efter år av att ha upplevt XML: s storhet och tunga förbrukning av bandbredd kom experter med JSON (JavaScript Object Notation). Till skillnad från XML fokuserar JSON mer på snabb och enkel datautbyte snarare än detaljerad datadefinition och modellering. Det eliminerar också all extra belastning som XML bär i form av repetitiva taggar.

JSON är baserad på den välbekanta nyckelvärdesparmekanismen. Dess syntax liknar JavaScript, vilket gör det ganska lätt att läsa och förstå.

Låt oss se hur vårt tidigare exempel på en studentrekord skulle visas när den lagras är JSON:

{"studentname": "Regina George","year": "2","courses": }

här är studenten objektet. studentnamn är ett exempel på en nyckel, som är ett attribut för objektet student. Dess associerade värde är Regina George. På samma sätt är kurser också en nyckel. Det är emellertid i form av en array (indikerad av kvadratkonsoler) eftersom den har flera värden associerade med den, det vill säga Kompilatordesign, filmstudier och redovisning.

protokoll

webbprotokoll är några fördefinierade regler som måste följas av alla som kommunicerar via webben.

HTTP

HyperText Transfer Protocol, bättre känt som HTTP, är ett webbprotokoll som definierar två begrepp:

1. hur klientförfrågningar vidarebefordras till servrar
2. hur servrar svarar på klientförfrågningar

begäran måste ange följande fyra punkter:

1. webbadressen för den resurs som klienten vill ha
2. en metod, till exempel GET (som används för att hämta data från servern) eller POST (som används för att skicka data som behöver uppdateras på servern)
3. en lista med rubriker (Förfrågningsrubriker kan innehålla diverse information om klienten eller resursen som de har begärt, till exempel klientens webbläsarnamn, operativsystem, meddelandestorlek, tid och datum för begäran, åtkomstkontrollinformation/referenser etc.)
4. det organ som innehåller den information som klienten vill skicka till servern

servern skickar ett svar från den andra änden när en begäran har behandlats. Detta svar anger tre element:

1. en statuskod som är i form av ett 3-siffrigt nummer (en statuskod som du kanske har sett under dina dagliga webbläsningssessioner är 404, vilket indikerar att den begärda resursen inte kunde hittas.)
2. en lista med rubriker (svarhuvuden liknar förfrågningshuvuden i strukturen och kan innehålla information som meddelandestorlek, innehållstyp etc.)
3. det organ som innehåller den information som klienten begärde från servern

andra protokoll

nedan är en lista över andra vanliga webbprotokoll och deras användning.

protokoll	står för	användning
TCP	Transmission Control Protocol	för att upprätta en anslutning mellan två enheter på webben och hantera leverans av datapaket
IP	Internetprotokoll	för överföring av datapaket mellan två enheter på webben
TCP / IP		dessa två webbtekniker fungerar ofta tillsammans.
UDP	User Datagram Protocol	för att upprätta en anslutning mellan två enheter på webben
FTP	File Transfer Protocol	för överföring av filer mellan klienten och servern
SMTP	Simple Mail Transfer Protocol	för att skicka e-postmeddelanden till servern
POP	Post Office Protocol	för att hämta e-postmeddelanden från servern
SOAP	Simple Object Access Protocol	för sändning XML-meddelanden via HTTP

grafik

grafiska element är en nyckelfunktion på vilken webbsida som helst. De bidrar inte bara till försköning av en sida utan kan också användas för att förmedla viktiga punkter på ett bättre sätt än text gör.

1. Canvas

Canvas är ett element som är en del av HTML. När den används tillsammans med JavaScript (eller något annat skriptspråk) kan du rita grafik på en webbsida bit för bit. JS-aspekten ger interaktivitet i Dukgrafik, inklusive animering.

Canvas fungerar bäst i situationer där ett stort antal grafiska objekt måste laddas på en webbsida. Det är snabbt och lätt i den aspekten. Det är dock inte särskilt exceptionellt när det gäller att ändra storlek på grafik och skala upp dem eftersom det är rasterbaserat.

2. SVG

SVG står för Scalable Vector Graphics. Den är baserad på XML och fungerar mycket bra med HTML. det kan också enkelt manipuleras med CSS.

hemligheten till dess popularitet är i sitt namn: skalbarhet. Det som skiljer SVG från andra grafiska stilar som JPEG och PNG är att det inte är pixelbaserat. Det bygger på numeriska dimensioner (vektorer) som enkelt kan skalas upp eller ner utan kvalitetsförlust.

när det gäller att använda grafiska element på en webbplats är kvaliteten på grafiken en kritisk faktor. SVG uppnår inte bara hög prestanda för större grafik utan säkerställer också interaktivitet. På grund av dessa skäl är SVG för närvarande en av de mest föredragna grafiska webbteknologierna.

3. WebGL

Web Graphics Library, bättre känt som WebGL, är en webbteknikresurs som gör att webbläsare kan göra både 2D-och 3D-bilder på skärmen. Det eliminerar behovet av externa plug-ins och är kompatibel med både stationära och mobila webbläsare.

andra

här är några andra webbtekniker som du kanske inte har hört talas om tidigare. Vi anser att de förtjänar ett hedersomnämnande i vår artikel.

1. Perl & CGI

Perl är ett allmänt plattformsoberoende programmeringsspråk som gradvis har vunnit popularitet i webbutvecklingslandskapet. Det bygger på språk som C och BASIC och fungerar smidigt med HTML, Det vanligaste markeringsspråket. Perl fungerar också bra med vanliga databaser som MySQL och Oracle.

Perl används för att skriva applikationer som implementerar CGI (Common Gateway Interface). CGI är ett webbprotokoll som definierar hur ett program kommunicerar med webbservern när du gör HTTP-förfrågningar. Dessa CGI-skript gör processen för resursupphämtning effektivare.

2. MathML

liksom HTML är MathML (Mathematical Markup Language) ett markup language. Det används emellertid specifikt för korrekt och korrekt representation av matematiska och vetenskapliga ekvationer på webben.

MathML ser inte bara till att ekvationer visas korrekt utan tilldelar också betydelse för matematiskt innehåll. Allt detta uppnås genom att använda XML-element för representation av matematiskt innehåll och symboler. Till exempel översätts msqrt-elementet till en kvadratrotsymbol, den trigonometriska sinusfunktionen representeras av sin-elementet och så vidare.

3. XSL, XSLT & EXSLT

XSL (Extensible Stylesheet Language) är ett språk som används för att definiera hur XML-data måste formateras när de visas för klienten. Medan XML hanterar själva data, hanterar XSL dess omvandling, layout och presentation. Vi kan säga att XSL tjänar samma syfte med XML som CSS gör med HTML.

W3-webbplatsen anger de två beståndsdelarna i XSL: a) XSLT (transformationer) för att hantera transformationer och b) XSL-FO (Formateringsobjekt) för att hantera formatering, paginering etc. Men 2013 avbröts XSL-FO och ersattes av CSS3.

XSLT (Extensible Stylesheet Language Transformations) är ett språk som definierar hur XML-dokument ska konverteras till andra, mer läsbara format som HTML. Det gäller XSL formatmallar till XML-dokument, med hjälp av en XSL-processor, för att försköna XML-data.

EXSLT är ett sätt att utöka funktionaliteten hos XSLT. Det är inte en officiell del av XSLT men är ett samhällsdrivet projekt. Det syftar till att göra XSL-formatmallar mer bärbara och öka deras funktionalitet och support genom att lägga till fler funktioner till dem.

framtiden för webbteknologier

en rapport från Cisco förutspår att nästan 52% av världens befolkning kommer att ha tillgång till internet år 2020. World Wide Web kommer att växa till häpnadsväckande priser för att inkludera ett högre antal personer, enheter och resurser tillgängliga online. Därför förväntas webbteknologier skala upp. Följaktligen kommer tekniker att sträva hårdare för att tillhandahålla tillgängligt webbinnehåll till användare överallt. Hårdare säkerhetsåtgärder måste vidtas för att skydda privat webbinnehåll från skadliga cyberattacker.

WWW började som Web 1.0 med statiska webbsidor skrivna i vanlig gammal HTML. Det gick sedan vidare till Web 2.0 med tillkomsten av JavaScript och annan teknik som gjorde det möjligt för användare att interagera med webbinnehåll och producera sina egna.

snart kommer webben att gå ett steg längre och gå in i sin tredje fas, dvs Web 3.0, som kommer att vara mycket mer decentraliserad än den är idag. Modern teknik som AI och IoT kommer snart att dominera webben. Allt kommer att bli mycket mer automatiserat när det gäller både utveckling och konsumtion av nytt innehåll.

vi hoppas att den här artikeln hjälpte dig att få några värdefulla insikter i utvecklingen och framtiden för webbteknik. Fortsätt följa vår blogg för att hålla dig uppdaterad om andra intressanta utvecklingar i WWW-landskapet!