Webinterfaces maken: waar te beginnen

Advertentie

Computercode en pixels zijn meer dan bakstenen, de basis van de economie van de 21e eeuw. Als je ooit naar 'Paginabron' of 'Ontwikkelaarstools' in je browser hebt gekeken, ben je waarschijnlijk een puinhoop van tekst tegengekomen en vroeg je je af hoe de webpagina daardoor werkt.

Webontwikkelaars bellen Graphical User iknterfaces (GUI's) gezamenlijk de voorkant van een webpagina, in tegenstelling tot de back-end. De front-end is wat de gebruiker kan manipuleren, actie kan ondernemen en anderszins kan gebruiken. De back-end kan worden gezien als de infrastructuur die alle informatie en taken bevat en ondersteunt die door de front-end worden geïmpliceerd.

Dit artikel gaat over de front-end. We brengen het territorium in kaart, zodat u inzicht krijgt in de verschillen en mogelijkheden die de front-end wat maken het is, en laat u zien hoe u de tools van webontwikkelaars kunt gaan gebruiken - en gebruiken - om aantrekkelijk en interactief internet te creëren Pagina's.

Webdesign 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 developers zouden het implementeren.

Voor een individu 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 op design hebt, 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 min of meer een coderingsactiviteit. Meer omdat het in zijn denken meer dan de helft van het ontwerp is: veel concepten zijn afkomstig uit de wereld van printproductie. Minder omdat, terwijl het computercode gebruikt, die code een variëteit is die minder complex, vergevingsgezinder is en minder basiskennis van programmeren vereist dan andere webprogrammeertalen (veel daarvan zijn te vinden op de back-end) Welke programmeertaal om te leren - WebprogrammeringVandaag gaan we kijken naar de verschillende webprogrammeertalen die het internet van stroom voorzien. Dit is het vierde deel van een programmeerserie voor beginners. In deel 1 leerden we de basis van ... Lees verder .

De front-end van internet: opmaak, stijlblad en programmeertalen

De meeste webpagina's zijn opgebouwd met een drietal technologieën: hypertekst-opmaaktaal (HTML), cascading style sheets (CSS) en JavaScript (JS):

• Markup talen zoals HTML markeer een document met tags. Tags markeren semantische inhoud en structureren het document. Gestructureerde documenten kunnen zijn gestileerd.
• CSS is een style sheet taal en afstammeling van aanwijzingen in afdrukstijl naar een paginasamensteller (die het uiteindelijke afdrukbare beeld voor een drukpers maakt); op internet dicteert CSS de presentatie van inhoud zoals typografie en lay-out in het algemeen, evenals het plaatsen van afbeeldingen.
• JavaScript is, in tegenstelling tot de vorige twee, een programmeertaal. JS zorgt voor interactie en gebruikersinvoer en is gericht op de gebeurtenissen die een gebruiker produceert. Om het plaatje iets meer in te vullen, is het tegenovergestelde van een gebeurtenisgestuurd paradigma een waar 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 bedoeld voor een lezer scheiden van de structuur die nodig is om het document te parseren.

Waarom heb je het nodig

Waarom is HTML nog steeds belangrijk? Simpel gezegd, HTML is 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 en wat structureel is, gegroeid in plaats van afgenomen. De meest recente versie van HTML (5) introduceerde tags zoals

,

Anatomie van een HTML-element

HTML-elementen zijn minimaal paren van openen en sluiten van tags, elke tag ingesloten in , zoals de alineatag, hieronder in cyaan. Elementen kunnen nemen attributen, zoals hieronder in magenta, zoals een "klasse", waardoor het element lid wordt van een groep die HTML en JS kunnen beïnvloeden. De stijl attribuut, waarvan de inhoud hieronder in rood is geschreven, is eigenlijk een manier om alleen voor dat element een eenmalige CSS-regel te maken. (CSS kan het beste worden geschreven op site- of paginaniveau, zoals we hieronder zullen bespreken.)

Het resultaat van deze opmaak:

Gewone alineatekst hier.

Extra krediet (geavanceerd)

Allerlei ontwikkelaars zijn geobsedeerd door de snelheid van uitvoering. Daartoe zullen ze de talen zelf optimaliseren voor snelheid bij het schrijven en het maken van leesbare regels. Dit heet syntactische suikerlaag. De HTML-gemeenschap heeft een paar van deze inspanningen geleverd.

Waarom zou u een op ontwikkelaars gerichte snelkoppeling gebruiken als u vermoedelijk een beginner bent? Door dingen in een eenvoudigere opmaak te maken, kunt u zich concentreren op de intentie, niet op de uitdrukking, terwijl u als laatste valideert tegen een standaard. De bronbestanden die u in de vereenvoudigde opmaak genereert, worden ofwel in geldige HTML gecompileerd, of de compiler genereert een fout op een specifiek regelnummer. Misschien vind je dat leerzamer dan het zoeken naar 'tag soup' voor een ontbrekende hoekbeugel. Ze hebben elk een intermediair stuk software nodig om ze in HTML te kunnen compileren. (Het is extra krediet, immers.)

• Haml (HTML Abstraction Markup Language) | Vereist Robijn (waarover we eerder zorgvuldig hebben geschreven 3 Interactieve, leuke, gratis manieren om de programmeertaal Ruby te lerenRuby is een expressieve scripttaal van zeer hoog niveau. Het wordt op het web voornamelijk gebruikt als onderdeel van het Ruby on Rails-webontwikkelingsraamwerk, maar ook zelfstandig. Als je nieuwsgierig bent naar wat Ruby (niet ... Lees verder ) compileren
• Jade [Broken URL Removed] | Vereist Node.js (vind je hier een introductie Wat is knooppunt. JS en waarom zou ik erom geven? [Webontwikkeling]JavaScript is gewoon een programmeertaal aan de clientzijde die in de browser wordt uitgevoerd, toch? Niet meer. Node.js is een manier om JavaScript op de server uit te voeren; maar het is ook zoveel meer. Als... Lees verder ) compileren
• Slank | Vereist Ruby om te compileren (zoals hierboven)

CSS

CSS maakt het mogelijk om semantische inhoud en documentpresentatie afzonderlijk te huisvesten, waardoor stilistische functies zoals lay-out, kleuren en typografie draagbaar en toepasbaar zijn op verschillende documenten. Wanneer inhoud en visueel ontwerp gescheiden zijn, krijgt de ontwikkelaar meer flexibiliteit en consistentie in visueel ontwerp.

Waarom heb je het nodig

Ongestileerde websites zien er vreselijk en onaantrekkelijk uit. Hoewel ze misschien leesbaar zijn, is CSS de hoeksteen van de hiërarchie van visuele informatie vanwege de lay-out die het mogelijk maakt. De onderstaande afbeelding illustreert bijvoorbeeld gedeeltelijk het huidige bovenste navigatiemenu van makeuseof.com, zonder enige CSS toegepast.

Merk op dat, behalve typografie en kleur, het niet-gestileerde menu verticaal is, want dat is de standaardstijl van de browser. Het is onwaarschijnlijk dat u het internet van 1990 opnieuw wilt creëren, dus u wilt een gezonde en voortdurende dosis CSS-kennis om echt competent te zijn. Bovendien, met de opkomst van apparaten van verschillende grootte en verbonden, zoals iPhones, tablets, enzovoort, één van de belangrijkste vaardigheden is 'Responsive Design' geworden, of webpagina's die zich aanpassen aan verschillende schermen maten. 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

Idealiter worden stijlen geschreven in afzonderlijke stijlbladen waarnaar meerdere webpagina's kunnen verwijzen. Door dezelfde set regels te gebruiken, kunnen auteurs tijd besparen en een visuele presentatie creëren met meer orde en consistentie. (Inline stijlen kunnen u niet helpen de basis te vormen van een site- of zelfs paginabrede stijl - daarom worden ze het best spaarzaam gebruikt om aan specifieke behoeften te voldoen.)

CSS-regels beginnen met een selector, hieronder in het groen geschreven. In dit geval is de selector voor de regel p, voor alinea: de regel is van toepassing op alinea-elementen. De regel staat tussen {accolades}, in tegenstelling tot . In dit geval maakt de regel het lettertype voor alineatekst normaal.

CSS-regels kunnen complexer en gecompliceerder worden dan deze introductie mogelijk maakt. Daarom kunt u verwachten wat betreft tijd Het duurt veel langer om CSS onder de knie te krijgen dan HTML.

Extra krediet (geavanceerd)

Net als HTML heeft CSS zijn optimalisaties voor diegenen die meer en sneller willen bereiken.

• SASS (en SCSS) | Vereist Ruby, zoals hierboven
• Minder | Vereist Node.js, zoals hierboven

JavaScript

Als veel mensen denken aan coderen, beschouwen ze het als een instructie aan de computer hoeDoen iets. Dit is de taak van een programmeertaal, onze laatste toevoeging aan de front-endvergelijking.

Programmeertalen worden meestal geclassificeerd op basis van het abstractieniveau dat ze gebruiken in hun semantiek, hun vooroudertalen, hun paradigma's, en hun typen disciplines. JavaScript tart eenvoudige classificatie omdat het is uitgebreid tot zoveel frameworks, voor zoveel verschillende doeleinden. Het is een flexibele, vaag afgeleid-uit-de-C-familie, multi-paradigma, losjes getypeerde hybride kameleon die ekster speelt met coderingsconcepten. Het is ofwel een geweldig voorbeeld van een taal voor zeer algemeen gebruik, of een zeer slecht voorbeeld van veel verschillende soorten talen.

Waarom heb je het nodig

Waarom JavaScript leren? Zoals mijn collega opmerkt, heeft JavaScript zijn kampioenen en tegenstanders 6 eenvoudigste programmeertalen om te leren voor beginnersLeren programmeren gaat net zo goed over het vinden van de juiste taal als over het opbouwproces. Hier zijn de zes gemakkelijkste programmeertalen voor beginners. Lees verder , vooral als het geschikt is voor beginnende leerlingen. Het is mogelijk de meest populaire programmeertaal van vandaag. Hoewel het geen sterke basis biedt om de rest van het codeerrijk te begrijpen, is er een goed argument om JS naast Ruby of PHP te leren.

Dat gezegd hebbende, vanille JS gaat niet ver: frameworks zijn verantwoordelijk voor de webpagina's van vandaag.

Populaire frameworks

• Angular, het JS-framework van Google voor webapplicaties zoals Gmail en de rest.
• JQuery Het web interactief maken: een inleiding tot jQueryjQuery is een client-side scripting-bibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige Javascript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees verder , al gedekt door MUO hier Het web interactief maken: een inleiding tot jQueryjQuery is een client-side scripting-bibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige Javascript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees verder , dat onder andere WordPress ondersteunt.
• Reageer, gebouwd door de technische legioenen van Facebook, is gemaakt voor het maken van UI's.

Extra krediet (geavanceerd)

De palimpsest-aard van JavaScript smeekt om enige structuuroplegging. Elk van de onderstaande suikerjassen gaat gedeeltelijk in de richting van implementatie

• CoffeeScript | Vereist Node.js, zoals hierboven
• Typescript | Vereist Node.js, zoals hierboven

Waar te beginnen met leren

Omdat front-end ontwikkeling nu algemeen wordt beschouwd als een cruciale beroepsbekwaamheid voor allerlei soorten kenniswerkers, zul je veel uitgangspunten vinden in de vorm van e-learningcursussen. Hier is een samengestelde lijst die we hebben gemaakt voor onze lezers:

• Coursera (Betaald)
  Coursera verzamelt online cursussen van universiteiten en onderwijsinstellingen. Het prijsbereik daalt van 50-250 USD voor een cursus, maar ze adverteren een hoog kennisniveau en resultaten met hoge competentie.
• Algemene Vergadering Dash (Vrij)
  Algemene Vergadering is een populaire optie voor betaald beroepsonderwijs. Dash is hun gratis aanbod en omvat HTML / CSS / JS.
• MakeUseOf.com - De Learn to Code 2017-bundel (Betaald, stekker)
  Levenslange toegang tot 10 klassen die het hele spectrum van front- en back-end webontwikkeling beslaan, voor slechts 20 USD.
• Mozilla Developer Network (Vrij)
  MDN is gezaghebbend, maar heeft meer deel aan de stijl van documentatie dan aan klassikale instructie of gamified online-aanbod.
• Boomhut (Betaald)
  Nog een online aanbod, deze betaalde per maand in plaats van cursus. Dit komt op aanbeveling van Karen X Cheng in haar virale mediumpost “Hoe krijg je een baan als ontwerper zonder naar de ontwerpschool te gaan.”
• Web Design-zelfstudies door Envato Tuts + (Gemengd van gratis en betaalde inhoud van gelijke kwaliteit)
  Een overvloed aan eenmalige artikelen en meerdelige reeksen hoogwaardige, specifieke en gerichte informatie, meestal over één onderwerp.

Ermee beginnen

Een van de voordelen die front-end ontwikkeling voor de beginner heeft, is dat het voor het grootste deel niet vereist is dure propriëtaire tools: de meest basale tool van front-end ontwikkeling is de teksteditor in combinatie met de browser van uw keuze:

• Teksteditors zoals Git's Atom-teksteditor, Sublieme tekst (betaald), of VS Code van Microsoft
• Browsers zoals Mozilla Firefox of Google Chrome
• Het is nuttig, maar buiten het bestek van dit artikel, om hosting of een lokale server te hebben (zoals XAMPP) opstelling.

Handiger, zij het minder permanent, zijn webgebaseerde live-editors zoals:

• Codepen.io
• JSbin.com

Short Cuts

HTML-structuren zijn voor het grootste deel goed begrepen en zijn niet bepaald waard om opnieuw te worden gecodeerd met grote frequentie. Voor CSS is het stijlblad van de gemiddelde site duizenden regels lang en je kunt er zeker van zijn dat er maar weinig moderne zijn die uitsluitend met de hand zijn geschreven. En op het gebied van interactiviteit zijn er bepaalde standaarden ontstaan. Op grond van die feiten zul je merken dat veel front-end-ontwikkelaars kant-en-klare frameworks als ruggengraat gebruiken en vervolgens naar behoefte aanpassen, verwijderen of vervangen.

• Bootstrap, oorspronkelijk ontwikkeld door Twitter, bevat HTML-, CSS- en JS-sjablonen die tegenwoordig algemeen op internet te vinden zijn. Bootstrap is bijna een lingua franca in het begin van webontwikkeling.
• fundament factureert zichzelf als het meest geavanceerde framework ter wereld en is gebouwd met de nadruk op kleine afmetingen en snelheid.

Referentiemateriaal

• Een lijst apart - Een publicatie in de A-lijst, "Voor mensen die websites maken"
• Kan ik gebruiken - "Ondersteuningstabellen voor HTML5, CSS3, enz."
• CSS-trucs - Een hub voor de CSS-gemeenschap en een bron van kennis over best practices en compatibiliteit
• HTML Living Standard-documentatie - "The Living Standard - editie voor webontwikkelaar"
• HTML5 alstublieft - "Gebruik het nieuwe en glanzend verantwoord"
• Smashing Magazine - "Voor professionele webdesigners en ontwikkelaars"

Gevolgtrekking

We hopen dat je genoten hebt van deze oriëntatie op de wereld van de front-end. Zoals u kunt zien, is front-end ontwikkeling een veld met veel mogelijkheden, maar met veel toegangspunten. Door het te leren, voegt u een indrukwekkende vaardigheid toe aan uw portfolio en kunt u de volgende stap in uw carrière nemen of overstappen naar een geheel nieuwe.

Ontwikkelaars: Wat zit er in uw front-end stack?

Beginners: Wat hadden we anders kunnen toevoegen om u te oriënteren?