Web Technologies: En Reise FRA HTML Til Web 3.0

denne artikkelen er spesielt for de leserne som ønsker å få litt kunnskap om eller er interessert i å jobbe som webutviklere eller på andre aspekter av nettet.

i denne artikkelen vil vi fokusere på nitty-gritty av noen kjente-så vel som noen ikke-så-kjente-webteknologier. Etter en rask og enkel introduksjon til web-teknologi, vil vi gå over grunnleggende om ulike typer web-teknologi.

I løpet av vår diskusjon vil vi også dekke en kort historie om webteknologi, samt noen funksjoner og funksjonalitet av hver type teknologi som vi snakker om.

Hva Er Webteknologi?

Webteknologier Er de ulike verktøyene og teknikkene som benyttes i kommunikasjonsprosessen mellom ulike typer enheter over internett.

for å forstå dette begrepet på en bedre måte, la oss bryte det ned i to deler: ‘web’ og ‘teknologi’.

web, i dette tilfellet, refererer Til World Wide Web, mer kjent SOM WWW. Det ble først til i 1989 Da berømte vitenskapsmann Og ingeniør, Tim Berners-Lee, kom opp med en effektiv mekanisme for å dele ressurser mellom forskere over hele verden.

konseptet av nettet kan enkelt forklares ved hjelp av et eksempel.

la oss anta at du leter etter et bilde av en søt lama. Du skriver ‘www.google.com’ inn i nettleseren din. Du skriver inn ‘cute llama’ i søkefeltet og klikker på’ Bilder ‘ – fanen. Google gir deg en mengde llama bilder samlet fra millioner av forskjellige kilder.

etter å ha rullet litt, tenker du: «Å, jeg liker dette bildet!»Men du må se bildet i full størrelse før du laster det ned. Så åpner du det opprinnelige bildet og kommer til denne siden:

legg merke til den røde boksen?

DET ER URL-ADRESSEN (en type identifikator) for dette bestemte bildet. På samme måte vil hvert llama-bilde du så ha en annen URL som vil bidra til å finne bildet på internett.

Alle disse nettsidene, dokumentene og andre ressurser identifiseres og lokaliseres ved Hjelp Av Nettadressene. Disse samlet danner det vi refererer til Som World Wide Web.

kunnskapen du samler om nettet og hvordan det fungerer, må brukes for å få bedre følelse av det. For dette må du vite grunnleggende om noen vanlige webteknologier. For å få en bedre forståelse av nettet, la oss ta en titt på noen grunnleggende typer og eksempler på web-teknologi som ofte brukes i dette feltet.

Hva Er De Forskjellige Typene Av Web-Teknologier?

Siden vi har begrenset plass til å undersøke det brede utvalget av webteknologier som er tilgjengelige, har vi plukket ut noen som brukes oftest av både nybegynnere og eksperter i bransjen. Vi har delt dem inn i følgende seksjoner:

1. det grunnleggende, som vil dekke nettlesere og noen grunnleggende webapputvikling
2. Programmeringsspråk og rammer som brukes i utviklingen av nettsteder
3. Databaser som brukes på backend for å lagre data som kreves eller samles inn av nettsteder
4. noen protokoller, det vil si regler for kommunikasjon på nettet
5. Grafisk, audiovisuell, audiovisuell, og andre multimedieelementer
6. Noen Dataformater som vanligvis brukes til å overføre data over internett
7. andre diverse Webteknologier

mens vi vil starte med det grunnleggende, vår diskusjon kan bli litt mer teknisk i naturen som vi avanserer videre i artikkelen.

La Oss nå komme inn i detaljene for hver komponent vi oppførte.

Grunnleggende

i denne delen vil vi snakke om nettlesere og noen andre grunnleggende web.

Nettlesere

nettlesere, ofte bare kalt nettlesere, gjør det mulig for Oss å se alle ressursene som er en Del av World Wide Web. De er basert på en klient-server arkitektur. Klienten er nettleseren i dette scenariet. Du kan tenke på serveren som en kombinasjon av programvare og maskinvare som mottar kundens forespørsler og deretter sender den forespurte ressursen til klienten.

når du skriver INN EN URL i en nettlesers adressefelt, videresender den forespørselen din til serveren og henter og viser hva brukeren ba om.

Noen populære nettlesere Er Opera, Mozilla Firefox, Google Chrome og Safari.

Frontend vs Backend Utvikling Teknologier

hva er webutvikling?

webutvikling refererer til prosessen med å lage nettsteder. Denne prosessen er basert på en rekke trinn, som vi vil dekke mer detaljert når vi undersøker verktøyene som er involvert i hver prosess.

de to delene av et typisk nettsted

Når vi går videre, vil vi diskutere individuelle webutviklingsteknologier og verktøy som brukes til å lage nettsteder. Men før det må vi være klare på de to forskjellige delene av et nettsted: frontend og backend.

Frontend refererer til alle de delene av et nettsted som en bruker kan se på skjermen og samhandle med.

Backend refererer til det motsatte av det. Det innebærer skjulte mekanismer som gjør en webside funksjon. En typisk bruker er generelt uvitende om hva som foregår på backend.

Ulike webteknologier brukes i prosessen med webdesign og utvikling.

her er en kort oversikt over forskjellene mellom de to kategoriene av webutvikling.

Frontend	Backend
Klientsiden	Serversiden
Webdesign	Databaser
UI / UX	Servere
Noen UI-teknologier:	noen backend-teknologier:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Rubin
	.NET

HTML

HyperText Markup Language, mer ofte referert TIL SOM HTML, ER DER WWW startet. Det er en kritisk komponent i alle innledende leksjoner som dekker grunnleggende web. Det er et klient-side språk som brukes til å kode frontend av et nettsted. Det hjelper utviklere å definere hvordan nettsiden skal struktureres, og det gjør det ved hjelp av elementer som er identifisert av koder.

her er et veldig grunnleggende eksempel på et stykke kode skrevet 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>

hvert element i brakettene < > er et element. DOCTYPE er imidlertid bare en erklæring som kommuniserer til nettleseren at det som skal lastes er ET HTML-dokument. <brødtekst > – elementet definerer alt innhold som danner brødteksten i dokumentet. < h1 > og < p> angir starten på henholdsvis en overskrift og et avsnitt. </kropp>, < /h > og < / p> lukker koder. De angir hvor kroppen, overskriften og avsnittet slutter.

i dette eksemplet brukes stilattributtet til å tilordne en bestemt bakgrunnsfarge, skriftfarge, familie og størrelse til teksten. Det kan utvides ytterligere for å inkludere skriftstil (fet, kursiv, …), justering (sentrum, venstre, …), etc. Andre attributter bortsett fra stil kan også brukes til å endre elementer på en lignende måte.

(strengen av tilfeldige tegn & #128513; på slutten av avsnittet er et overraskelseselement som du kan se på utdataskjermen nedenfor!)

CSS

CSS er en av de mest grunnleggende webdesign teknologier. For ytterligere å forskjønne websidene dine, kan du integrere CSS (Cascading Style Sheets) i HTML-koden.

prosessen med å bruke bestemte stiler til bestemte elementer I HTML-koden din kan bli en repeterende oppgave. FOR å spare tid og energi, KAN CSS brukes til å effektivisere prosessen med styling sidene på tvers av hele området. Når du har klargjort et stilark med alle standard skriftstiler, farger og andre egenskaper knyttet til den generelle utformingen av en nettside, kan du bruke den på hele nettstedet. CSS er også kombinert Med Bootstrap å designe mobile første web apps.

Programmeringsspråk Og Rammer

Programmeringsspråk er den mest grunnleggende komponenten av nettstedskaping. For å kode et nettsted må du være kjent med noen programmeringskonsepter, noen språk og deres syntaks, og en god utviklings IDE. Noen av disse språkene kan være generelle, men andre er spesielt opprettet med det formål å webutvikling.

Nedenfor er noen eksempler på vanlig brukte webutviklingsspråk.

1. Java

Java ble opprettet i 1991 som et generelt programmeringsspråk, men utviklet seg sakte til å spille en viktig rolle i webutvikling på midten av 90-tallet.

Java er velkjent på grunn av noen av sine fantastiske funksjoner, inkludert dens

• Objektorientert natur
• Bærbarhet og plattform-uavhengighet
• Enkel syntaks
• Lærbarhet
• Robusthet

Når Det gjelder webutvikling, Brukes Java vanligvis på serversiden.

2. JavaScript

JavaScript ble først opprettet i 1995. I dag er det en favoritt av utviklere over hele verden. Det er nå en viktig del av webutvikling som bidrar til å skape dynamiske elementer av websider.

Innføringen Av JavaScript førte til den revolusjonerende bølgen av interaktive nettsider. I dag er inkluderingen av grafiske elementer, databaseintegrasjon og den generelle dynamikken til et nettsted mulig på grunn Av Adventen Av JavaScript.

Mens JavaScript først ble introdusert som et frontend-utviklingsspråk, blir Det nå et populært valg for backend-utvikling også.

3. Python

Python har eksistert i mange år,men er bare nylig stadig mer populært på grunn av sin ekstremt lett-å-lære, lesbar syntaks samt sin høye produktivitet. En oppgave som kan bruke 10 linjer med kode når den er skrevet i et annet programmeringsspråk, kan lett oppnås i 2-3 linjer Python-kode.

For server-side webutvikling, Er Python ofte brukt i forbindelse Med Django eller Flask rammeverk, noe som ytterligere forenkler utviklingsprosessen.

I år rapporterte Stackoverflow at Python slo Slike Som Java og C når det gjelder popularitet, og rangert 2nd på listen over mest elskede programmeringsspråk.

4. PHP

PHP, et rekursivt akronym, står FOR PHP: Hypertext Preprocessor. Det er det mest populære og brukte skriptspråket foretrukket av både nybegynnere og erfarne fagfolk i webutviklingsbransjen. Det er veldig lett å lære og er helt gratis.

NÅR DEN brukes Med Apache (eller andre) HTTP-server på backend, LAR PHP deg levere effektive, høyhastighets og høy ytelse web utviklingsprosjekter. OGSÅ, SIDEN PHP har eksistert i årevis og bare har vokst seg større og bedre, er det omfattende utviklersamfunnsstøtte lett tilgjengelig.

5. Ruby

Introdusert på midten av 90-tallet, Er Ruby et kraftig generelt programmeringsspråk som gjennom årene har blitt populært blant backend-utviklere. Det er ofte brukt i forbindelse med sin populære rammeverket Ruby on Rails. Ruby er spesielt anbefalt for trafikkintensive nettsteder og de som krever mye arbeid på databasen slutten. Det er også nyttig for å skrive skalerbare apps.

Populære nettsteder som Twitter og Shopify ble bygget med Ruby på backend.

6. Objective – C & Swift

Både Objective-C Og Swift er generelle programmeringsspråk som brukes spesielt til å bygge apper For Apple-enheter som kjører macOS og iOS.

Objective-C bygger På C mens Swift er tungt basert På syntaksen Til C++. Mens Objective-C har eksistert i mange år enn Swift har, mister den tidligere sakte tilhengere som det blir stadig mer foreldet. Swift forventes å gradvis erstatte Objective-C med sine mer avanserte funksjoner, brukervennlighet og sikkerhet. Helt Siden Swift var åpen kildekode, har utviklere også brukt det til webutvikling.

Rammer

enkelt sagt kan et rammeverk defineres som skjelettkode. Tenk på det som en grov oversikt uten fine detaljer. Et rammeverk definerer de grunnleggende funksjonene eller oppgavene som koden forventes å gjøre. Men for å fortelle det aktuelle programmet hvordan du utfører disse funksjonene, må du skrive noen mer detaljerte, spesifikke instruksjoner.

La oss ta en titt på noen rammer som ofte brukes av kodere for formålet med backend webutvikling, sammen med språkene de fungerer best med. Denne listen inneholder noen av de nyeste nettstedsteknologiene.

Rammer	Språk
Vue.Js	JavaScript
Express	Node.Js (JavaScript))
Reagere.Js	JavaScript
AngularJS	JavaScript
Django	Python
Kolbe	Python
Laravel	PHP
Ruby På Skinner	Ruby
Katalysator	Perl
Kakao & Kakao Touch	Swift

Å Velge blant disse alternativene avhenger av utviklingsbehovene dine. Du må bestemme hvilket rammeverk og språkkombinasjon som best oppfyller dine skalerbarhet, sikkerhet og produktivitetskrav uten å investere mye i å lære teknologien selv.

Databaser

Alle data som utveksles på nettet må lagres et sted. For dette formålet har de fleste nettsteder sine egne databaser knyttet til dem.

nedenfor er en liste over noen databaser – noen relasjonelle og andre, ikke-relasjonelle – som ofte brukes til webapplikasjoner.

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

Dataformater

når det er behov for å utveksle data mellom to enheter på nettet, følges en riktig prosedyre. Data er pakket riktig for overføring fra kilden til destinasjonen. Spesielle Apier (Application Programming Interfaces) er designet og integrert i nettsteder for praktisk datautveksling. De ordner dataene på en slik måte at mottakeren enkelt kan dekode og forstå det.

nedenfor er to vanlige dataformater som brukes i webutvikling.

1. XML

XML står For Extensible Markup Language. Vi diskuterte syntaksen FOR HTML i begynnelsen av denne artikkelen. XML fungerer på en lignende måte ved at den bryter ned data i elementer identifisert av ulike typer koder. MEN MED XML kan du oppfinne dine egne koder for å beskrive dataene dine bedre. Disse dataene, når de når en webapp eller server, kan lett forstås og analyseres.

La oss se på et eksempel på en oversikt over en student, hennes biodata og hennes registrerte kurs på universitetet. Dette er hva det ville se ut som lagret I XML:

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

her er hoved-eller rotnoden student. student navn, år og kurs er barn noder. Du kan si at disse er attributter til rotnoden. SOM DET er tilfelle MED HTML, SKRIVES XML-data også mellom åpnings – og lukkekodene til barnnodene.

2. JSON

etter mange år med Å oppleve XML ‘ s bulkiness og tungt forbruk av båndbredde, kom eksperter OPP MED JSON (JavaScript Object Notation). I motsetning TIL XML fokuserer JSON mer på rask og enkel datautveksling enn detaljert datadefinisjon og modellering. Det eliminerer også all den ekstra belastningen SOM XML bærer i form av repeterende koder.

JSON er basert på den kjente nøkkelverdiparmekanismen. Dens syntaks ligner JavaScript, noe som gjør Det ganske enkelt å lese og forstå.

La OSS se hvordan vårt tidligere eksempel på en studentpost vil vises når den er lagret, ER JSON:

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

her er studenten objektet. studentnavn er et eksempel på en nøkkel, som er et attributt til objektstudenten. Den tilhørende verdien Er Regina George. På samme måte er kurs også en nøkkel. Det er imidlertid i form av en matrise (angitt med firkantede parenteser) siden den har flere verdier knyttet til den, det vil Si Kompilatordesign, Filmstudier og Regnskap.

Protokoller

Webprotokoller er noen forhåndsdefinerte regler som må følges av at alle kommuniserer over nettet.

HTTP

HyperText Transfer Protocol, bedre kjent SOM HTTP, er en webprotokoll som definerer to begreper:

1. hvordan klientforespørsler videresendes til servere
2. hvordan servere svarer på klientforespørsler

forespørselen må angi følgende fire elementer:

1. URL-ADRESSEN for ressursen som klienten ønsker
2. en metode, FOR EKSEMPEL GET (som brukes til å hente data fra serveren) eller POST (som brukes til å sende data som må oppdateres på serveren)
3. en liste over overskrifter (Forespørselsoverskrifter kan inneholde diverse informasjon om klienten eller ressursen de har bedt om, for eksempel klientens nettlesernavn, operativsystem, meldingsstørrelse, klokkeslett og dato for forespørsel, tilgangskontroll informasjon/legitimasjon etc.)
4. kroppen som inneholder informasjonen som klienten ønsker å sende til serveren

serveren sender et svar fra den andre enden når en forespørsel er behandlet. Dette svaret angir tre elementer:

1. en statuskode som er i form av et 3-sifret nummer (en statuskode som du kanskje har sett under dine daglige nettlesingsøkter, er 404, noe som indikerer at den forespurte ressursen ikke ble funnet.)
2. en liste over overskrifter(svarhoder ligner forespørselshoder i struktur, og kan inneholde informasjon som meldingsstørrelse, innholdstype osv.)
3. kroppen som inneholder informasjonen som klienten ba om fra serveren

Andre Protokoller

nedenfor er en liste over andre vanlige webprotokoller Og deres bruk.

Protokoll	Står for	Bruk
TCP	Transmission Control Protocol	for å etablere en forbindelse mellom to enheter på nettet og administrere levering av datapakker
IP	Internet Protocol	for overføring av datapakker mellom to enheter på nettet
TCP / IP		disse to webteknologiene jobber ofte sammen.
UDP	User Datagram Protocol	for å etablere en forbindelse mellom to enheter på nettet
FTP	Filoverføringsprotokoll	for overføring av filer mellom klienten og serveren
SMTP	Enkel Mail Transfer Protocol	for å sende e-postmeldinger til serveren
POP	Post Office Protocol	for å hente e-postmeldinger fra serveren
SOAP	Enkel Objekttilgangsprotokoll	for sending XML-meldinger VIA HTTP

Grafikk

Grafiske elementer er en viktig funksjon på en hvilken som helst nettside. De ikke bare bidra til forskjønnelse av en side, men kan også brukes til å formidle viktige punkter på en bedre måte enn tekst gjør.

1. Canvas

Canvas er et element som er EN DEL AV HTML. Når det brukes Sammen Med JavaScript (eller et annet skriptspråk), kan du tegne grafikk på en nettside bit for bit. JS-aspektet gir interaktivitet I Lerretgrafikk, inkludert animasjon.

Canvas fungerer best i situasjoner der et stort antall grafiske objekter må lastes inn på en nettside. Det er raskt og lett i det aspektet. Det er imidlertid ikke veldig eksepsjonelt når det gjelder å endre størrelse på grafikk og skalere dem opp siden det er rasterbasert.

2. SVG

SVG står For Skalerbar Vektorgrafikk. DEN er BASERT PÅ XML og fungerer veldig bra MED HTML. DET kan også enkelt manipuleres VED HJELP AV CSS.

hemmeligheten til dens popularitet er i navnet: Skalerbarhet. HVA skiller SVG fra andre grafiske stiler som JPEG og PNG er at DET ikke er pikselbasert. Den er avhengig av numeriske dimensjoner (vektorer) som lett kan skaleres opp eller ned uten tap i kvalitet.

når det gjelder bruk av grafiske elementer på et nettsted, er kvaliteten på grafikken en kritisk faktor. SVG oppnår ikke bare høy ytelse for større grafikk, men sikrer også interaktivitet. PÅ grunn AV disse grunnene ER SVG for tiden en av de mest foretrukne grafiske webteknologiene.

3. WebGL

Web Graphics Library, bedre kjent Som WebGL, er en webteknologiressurs som lar nettlesere gjengi BÅDE 2D – og 3D-bilder på skjermen. Det eliminerer behovet for eksterne plug-ins og er kompatibel med både stasjonære og mobile nettlesere.

Andre

Her er noen andre webteknologier som du kanskje ikke har hørt om før. Vi føler at de fortjener en æres omtale i vår artikkel.

1. Perl & CGI

Perl Er en generell cross-platform programmeringsspråk som har gradvis blitt stadig mer populært i webutvikling landskapet. Den bygger på språk Som C OG BASIC og fungerer jevnt med HTML, det mest brukte kodespråket. Perl fungerer også bra med vanlige databaser som MySQL og Oracle.

Perl brukes til å skrive programmer som implementerer Cgi (Common Gateway Interface). CGI er en webprotokoll som definerer hvordan et program kommuniserer med webserveren når DU GJØR HTTP-forespørsler. DISSE CGI-skriptene gjør prosessen med ressurshenting mer effektiv.

2. MathML

Som HTML er MathML (Mathematical Markup Language) et kodespråk. Det er imidlertid spesielt brukt for nøyaktig og riktig representasjon av matematiske og vitenskapelige ligninger på nettet.

MathML sørger ikke bare for at ligninger vises riktig, Men tilordner også mening til matematisk innhold. Alt dette oppnås ved Å bruke XML-elementer for representasjon av matematisk innhold og symboler. For eksempel oversetter msqrt-elementet til et kvadratrotsymbol, den trigonometriske sinusfunksjonen representeres av sin-elementet og så videre.

3. XSL ,XSLT& EXSLT

XSL (Extensible Stylesheet Language) er et språk som brukes til å definere MÅTEN XML-data må formateres når vises til klienten. MENS XML omhandler selve dataene, håndterer XSL sin transformasjon, layout og presentasjon. VI kan si AT XSL tjener samme formål TIL XML SOM CSS gjør TIL HTML.

w3-nettstedet angir DE TO bestanddelene I XSL: a) XSLT (Transformasjoner) for å håndtere transformasjoner og b) XSL-FO (Formateringsobjekter) for å håndtere formatering, paginering, etc. MEN I 2013 ble XSL-FO avviklet og erstattet AV CSS3.

Xslt (Extensible Stylesheet Language Transformations) er et Språk som definerer HVORDAN XML-dokumenter skal konverteres til andre, mer lesbare formater som HTML. Det gjelder XSL stilark TIL XML-dokumenter, ved hjelp AV EN XSL-prosessor, for å forskjønne XML-data.

EXSLT ER et middel for å utvide funksjonaliteten TIL XSLT. DET er ikke en offisiell del AV XSLT, men er et fellesskapsdrevet prosjekt. Formålet er å gjøre XSL stilark mer bærbare og øke sin funksjonalitet og støtte ved å legge til flere funksjoner til dem.

Fremtiden For Webteknologi

En rapport fra Cisco spår at nesten 52% av verdens befolkning vil ha tilgang til internett innen år 2020. World Wide Web vil vokse til forbløffende priser for å inkludere et høyere antall personer, enheter og ressurser tilgjengelig online. Derfor forventes webteknologier å skalere opp. Følgelig, tech fagfolk vil arbeide hardere for å gi tilgjengelig webinnhold til brukere overalt. Tøffere sikkerhetstiltak må tas for å beskytte privat webinnhold fra ondsinnede cyberangrep.

WWW startet Som Web 1.0 med statiske nettsider skrevet i vanlig GAMMEL HTML. Det flyttet deretter Til Web 2.0 med advent Av JavaScript og andre teknologier som gjorde det mulig for brukere å samhandle med webinnhold og produsere sine egne.

Snart vil Nettet gå et skritt videre og gå inn i sin tredje fase, Dvs. Web 3.0, som vil være langt mer desentralisert enn det er i dag. Moderne teknologier SOM AI og IoT vil snart dominere Nettet. Alt vil bli mye mer automatisert når det gjelder både utvikling og forbruk av nytt innhold.

vi håper at denne artikkelen hjalp deg med å få verdifull innsikt i utviklingen og fremtiden for webteknologier. Hold følge vår blogg for å holde deg oppdatert på andre interessante utviklingen I WWW landskapet!