Delen:
Webinterfaces maken waar te beginnen
Meer dan baksteen, computercode en pixels vormen de basis van de economie van de 21e eeuw. Als je ooit hebt gekeken “Pagina bron” of “Ontwikkelaarstools” in je browser ben je waarschijnlijk een hoop tekst tegengekomen en vroeg je je af hoe dat de webpagina doet werken.
Webontwikkelaars bellen Graphical User ikneters (GUI's) samen de voorkant van een webpagina, in tegenstelling tot de back-end. Het front-end is wat de gebruiker kan manipuleren, actie ondernemen en anderszins gebruiken. Het back-end kan worden beschouwd als de infrastructuur die alle informatie en taken bevat die worden ondersteund door de front-end en deze ondersteunt.
Dit artikel gaat over de front-end. We brengen het gebied in kaart zodat u inzicht krijgt in de onderscheidingen en mogelijkheden die de voorkant maken tot wat het is, en laten zien hoe u begint met het zinvol maken en gebruiken van hulpmiddelen voor webontwikkelaars om aantrekkelijk en aantrekkelijk te maken. interactieve webpagina's.
Webontwerp versus front-end ontwikkeling
In grote organisaties zijn ontwerp en ontwikkeling taken die worden uitgevoerd door teams van professionals met verschillende vaardigheden. Ontwerpers zouden een specifiek visueel en interactief ontwerp maken; front-end ontwikkelaars zouden het implementeren.
Voor een persoon is er echter geen reden om je verkenning te beperken: alleen omdat je geïnteresseerd bent in ontwikkeling, wil dat nog niet zeggen dat je geen visie hebt voor ontwerp en omgekeerd. Een bescheiden hoeveelheid kennis over elementaire webtechnologieën of ontwerpprincipes kan enorm nuttig zijn in uw carrière of bedrijf.
Front-end ontwikkeling is zowel meer en minder een coderingsactiviteit. Meer omdat het meer dan de helft van het ontwerp in zijn denken is: veel concepten komen voort uit de wereld van de printproductie. Minder omdat, terwijl het computercode gebruikt, die code een variëteit is die minder complex is, meer vergevingsgezind, en minder basiskennis van programmeren vereist dan andere webprogrammeertalen (waarvan er vele op de back-end te vinden zijn) Welke programmeertaal voor Leren - Webprogrammering Welke programmeertaal om te leren - Webprogrammering Vandaag gaan we de verschillende webprogrammeertalen bekijken die het internet voeden. Dit is het vierde deel in een beginnersprogrammaserie. In deel 1 leerden we de basis van ... Lees meer .
Front-end van het web: markeringen, typogrammen en programmeertalen
De meeste webpagina's zijn opgebouwd met een drietal technologieën: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) en JavaScript (JS):
- Opmaaktalen zoals HTML een document markeren met labels. Tags definiëren semantische inhoud en structureren het document. Gestructureerde documenten kunnen zijn gestileerde.
- CSS is een stijlbladtaal en afstammeling van afdrukstijlrichtingen naar een pagina-samensteller (die de uiteindelijke afdrukbare afbeelding voor een drukpers maakt); op het web dicteert CSS de presentatie van inhoud zoals typografie en lay-out in het algemeen, evenals het plaatsen van afbeeldingen.
- JavaScript, in tegenstelling tot de vorige twee, is een programmeertaal. JS verwerkt interactie en gebruikersinvoer en is gericht op de gebeurtenissen die een gebruiker produceert. Om iets meer in te vullen, is het tegenovergestelde van een door gebeurtenissen aangestuurd paradigma een programma waarbij het programmeren wordt uitgevoerd ongeacht de invoer van de gebruiker.
HTML
Het is meer dan twintig jaar geleden en het belangrijkste doel van HTML blijft hetzelfde: de tekst die is bedoeld voor een lezer scheiden van de structuur die nodig is om het document te ontleden.
Waarom heb je het nodig
Waarom is HTML nog steeds belangrijk? Simpel gezegd, HTML is de plaats waar de semantische betekenis van uw inhoud ligt. Dat is nodig voor machinelezers zoals spiders van zoekmachines en schermlezers (voor toegankelijkheid). In de loop van de tijd is de relevantie van het scheiden van wat semantisch is versus wat structureel is in de loop van de tijd eerder gegroeid dan verminderd. De meest recente versie van HTML (5) introduceerde tags zoals
Anatomie van een HTML-element
HTML-elementen zijn ten minste paren openings- en sluitingslabels, waarbij elke tag is ingesloten
Het resultaat van deze markup:
Plain alineatekst hier.
Extra krediet (geavanceerd)
Ontwikkelaars van alle soorten zijn geobsedeerd met de snelheid van uitvoering. Hiertoe zullen ze de talen zelf optimaliseren voor snelheid bij het schrijven en het creëren van leesbare regels. Dit wordt syntactische suikercoating genoemd. De HTML-gemeenschap heeft een paar van deze inspanningen geleverd.
Waarom zou u een ontwikkelaarcentrale snelkoppeling gebruiken als u vermoedelijk een beginneling bent? Door dingen in eenvoudiger opmaak te maken, kunt u zich concentreren op de intentie, niet op de uitdrukking, terwijl u valideert tegen een standaard van alles. De bronbestanden die u in de vereenvoudigde opmaak genereert, worden gecompileerd in geldige HTML of de compiler genereert een fout bij een specifiek regelnummer. Misschien vind je dat meer leerzaam dan doorjagen “tag soep” voor een beugel met ontbrekende hoek. Ze vereisen elk een tussenliggend stukje software om ze te transcompileren naar HTML. (Het is extra tegoed, tenslotte.)
- Haml (HTML Abstraction Markup Language) | Vereist Ruby (waarover we al eerder hebben geschreven 3 Interactief, leuk, gratis manieren om te beginnen met leren De Ruby programmeertaal 3 Interactief, leuk, gratis manieren om te leren De Ruby programmeertaal Ruby is een expressieve scripttaal van zeer hoog niveau Het wordt voornamelijk op internet gebruikt als onderdeel van het Ruby on Rails-webontwikkelingsraamwerk, maar ook als stand-alone.Als je nieuwsgierig bent naar wat Ruby (niet ... Lees meer) compileert
- Jade | Vereist Node.js (hier vind je een inleiding. Wat is Node.JS en waarom zou ik dit verzorgen? [Web Development] Wat is Node.JS en waarom zou ik dit schelen? [Web Development] JavaScript is slechts een client-side programmeertaal die in de browser draait, niet meer? Node.js is een manier om JavaScript op de server te gebruiken, maar het is ook zoveel meer ... Read More) compileren
- Slim | Vereist Ruby om te compileren (zoals hierboven)
CSS
Met CSS kunnen semantische inhoud en documentpresentaties afzonderlijk worden gehuisvest, waardoor stilistische functies zoals lay-out, kleuren en typografie draagbaar en toepasbaar zijn voor verschillende documenten. Wanneer inhoud en visueel ontwerp gescheiden zijn, krijgt de ontwikkelaar meer flexibiliteit en consistentie in visueel ontwerp.
Waarom heb je het nodig
Unstyled websites zien er vreselijk en onaantrekkelijk uit. Hoewel ze leesbaar kunnen zijn, is CSS de hoeksteen van de visuele informatiehiërarchie vanwege de lay-out die wordt gebruikt. De onderstaande afbeelding illustreert bijvoorbeeld gedeeltelijk het huidige navigatiemenu van makeuseof.com, zonder dat CSS is toegepast.
Merk op dat naast het typogram en de kleur, het niet-gestileerde menu verticaal is, omdat dat de standaardstijl van de browser is. Het is onwaarschijnlijk dat u het internet van 1990 opnieuw zou willen maken, dus u wilt een gezonde en voortdurende dosis CSS-kennis om echt competent te zijn. Bovendien, met de opkomst van apparaten met een verschillende grootte en verbondenheid zoals iPhones, tablets, et cetera, is een van de belangrijkste vaardigheden geworden “Reagerend ontwerp,” of webpagina's die zich aanpassen aan verschillende schermformaten. Dit wordt allemaal bereikt via CSS.
Anatomie van een CSS-regel
CSS-regels worden op een van de volgende drie plaatsen geschreven: a) inline binnen een element, b) door een