Share
Javascript kan veel speciale effecten toevoegen die de gebruikerservaring echt kunnen verbeteren. Hier zijn 10 eenvoudige en slimme Javascript-technieken die een extra dosis bruikbaarheid aan elke webpagina toevoegen.
Javascript wordt meestal gebruikt als een esthetische taal bij webontwikkeling. Dit betekent dat webontwikkelaars bijna altijd Javascript voor slechts één ding moeten gebruiken: De beleving van de bezoeker verbeteren. Er zijn veel slimme en nuttige manieren om een site vanuit het perspectief van de gebruikersinterface te verbeteren. Een ontwikkelaar kan bijna elk stukje JavaScript vinden om te bereiken wat hij of zij wil bereiken.
Voorbeeldafbeelding van miusam-ck.
Javascript is echt een krachtige en gemakkelijke taal om te leren. Het kan worden gebruikt om eenvoudige, esthetische functies uit te voeren, zoals het omschakelen van een element. Het kan worden gebruikt om een dynamische e-mailclient aan te drijven en zelfs gegevens onmiddellijk te verzenden. Javascript kan zo eenvoudig of geavanceerd zijn als u wilt.
Een geweldige plaats om Javascript-technieken te vinden die de functionaliteit van uw site kunnen verbeteren, is door te bladeren in Javascript-frameworks en hun plug-ins en documentatie. Hier zijn een paar frameworks met veel bronnen, plug-ins en community's achter hen:
Frameworks zijn een zegen voor elke ontwikkelaar of ontwerper die snel Javascript-effecten aan zijn lay-outs wil toevoegen, zonder dat hij daarvoor ruwe code hoeft te maken. Veel van de technieken die we hieronder gebruiken, werken op Javascript-frameworks zoals JQuery of MooTools.
Het is belangrijk op te merken dat veel van deze functies niet groot en onaangenaam zijn, maar eerder klein en subtiel. Te vaak worden ontwikkelaars weggevoerd als het gaat om het toevoegen van Javascript. Dit zijn kleine maar erg nuttig technieken die bijna door elke ontwikkelaar kunnen worden gebruikt. Je zult ook merken dat de meeste van deze functies omgaan met het slim verbergen en tonen van belangrijke informatie op niet-traditionele manieren.
De subtag cloud van jQuery hover is een uitstekend voorbeeld van een eenvoudig stukje Javascript dat echt een leuke, subtiele toets toevoegt aan tag clouds. Wanneer de gebruiker over een specifieke tag zweeft en er sub-tags aan zijn gekoppeld, verschijnt een pop-upvenster met de subtags. Eenvoudig, maar effectief.
Opacity Change is een kleine tutorial over het gebruik van Scriptaculous om een opaciteitsverandering voor een element te maken.
Wijzigingen in de dekkingslaag zijn om vele verschillende redenen geweldig: zwevende inhoud weergeven, inhoud waarop is geklikt en vele andere handige functies weergeven.
Foto's kunnen bijsnijden nadat u ze hebt geüpload, is een functie die door meer webtoepassingen kan worden gebruikt. Dat is de reden waarom het uploaden en bijsnijden van jQuery-afbeeldingen zo'n onvoldoende gebruikte Javascript-techniek is. Afbeeldingen bijsnijden is een broodnodige functie als het gaat om het uploaden van afbeeldingen, en veel webtoepassingen kunnen profiteren van het toevoegen van deze handige functie.
Eerlijk gezegd denk ik dat bijna alle beelduploads een standaard cropfunctie zouden kunnen gebruiken. Het bijsnijden van afbeeldingen is echter niet de eenvoudigste Javascript-functie om toe te voegen aan een formulier. Het is een enigszins betrokken proces, met behulp van afbeeldingenbibliotheken en Javascript. Het gebruik van dit script gebouwd op het jQuery-framework kan veel toevoegen aan de gebruikerservaring zonder een hoop extra code.
Naarmate hackers slimmer en groter worden in aantallen, wordt het steeds belangrijker voor sitegebruikers om sterke, niet-te raden wachtwoorden te kiezen die een combinatie van letters (hoofdletters en kleine letters), cijfers en speciale tekens bevatten. Deze taak is echter gemakkelijker gezegd dan gedaan. Gebruikers lezen meestal geen aanwijzingen als ze het kunnen helpen.
Het visueel weergeven van wachtwoordsterkte in registratieformulieren is een uitstekende manier om gebruikers aan te moedigen de wachtwoorden uitdagender te maken. Terwijl dit langzaam meer algemeen wordt, wordt deze eenvoudige techniek nergens zo vaak gebruikt als zou moeten.
De> Wachtwoordsterktemeter werkt af van prototype / scriptaculous en is een handig klein script dat de sterkte van het wachtwoord met een gekleurde meter in realtime laat zien. Meer sites moeten dit type 'veiligheidsscript' implementeren om gebruikers te helpen de gevaren te zien van het invoeren van zwakke wachtwoorden.
Magic Zoom is een zeer handig script voor eCommerce-sites, evenals andere sites met gedetailleerde afbeeldingen. In plaats van dat de gebruiker een extra klik maakt op een veel grotere afbeelding en de bandbreedte opgebruikt, kunt u met Magic Zoom hoofdzakelijk door een vergrootglas op elke foto kijken.
Magic Zoom is een betaald script, maar de moeite waard is $ 47 als je een eCommerce-winkel hebt of een andere site met zeer gedetailleerde foto's. U kunt de onderstaande proefversie downloaden.
Elk formulier op internet zou deze functie moeten hebben. Het is misschien wel de perfectionist in mij, maar het hebben van meerdere invoerformulieren die automatisch naar de volgende invoer verwijzen, lijkt er normaal te zijn. Het is een verademing bij het invullen van items zoals sofinummers wanneer de invoer automatisch naar de volgende invoer tabs.
Het jQuery Autotab-script spreekt voor zich en doet wat de naam aangeeft: voegt autotabs toe aan formulieren met jQuery.
Soms zijn het de kleine dingen in ontwikkeling die echt een verschil kunnen maken.
Hoewel we normaal gesproken niet graag onze eigen hoorn gebruiken bij NETTUTS, kunnen we het hebben over slimme en nuttige Javascripts zonder de geweldige tutorial van Connor Zwick over hoe je een handig inlogformulier kunt bouwen?
Het Javascript-aanmeldingsformulier is een elegante combinatie van jQuery en een prachtige Photoshop-lay-out om het effect te bereiken van het kunnen weergeven van een inlogformulier zonder dat de doos een groot deel van de pagina beslaat. Digg is een ander geweldig voorbeeld van een site die Javascript gebruikt om het aanmeldingsformulier te tonen en te verbergen.
Formulieren zijn enkele van de moeilijkste onderdelen van webontwerp. Vorm een formulier te lang en u kunt een potentiële gebruiker of klant afschrikken. Als het ontwerp van een formulier onaantrekkelijk is, kan dat ook een potentiële gebruiker afschrikken. Elke manier waarop we onze webformulieren aantrekkelijker kunnen maken voor het oog, levert een hoger sign-up conversiepercentage op.
De context waarin webformulieren worden gemarkeerd, is een uitstekend kenmerk dat moet worden toegevoegd aan een aanmeldingsformulier. Het is verrassend dat meer vormen deze functionaliteit niet bieden. Als u snel de voortgang van een formulier kunt zien, kan de gebruikerservaring merkbaar verbeteren.
Het script op het schuifpaneel lijkt veel op het aanmeldingsformulier voor ongelofelijk Javascript. Verbergen / tonen van belangrijke informatie is een sleutel tot mooie, bruikbare ontwerpen. Elke keer dat we Javascript kunnen gebruiken om onnodige informatie netjes weg te houden, moeten we ernaar streven om dat te doen.
Knoppen en links voor site-promotie kunnen snel rommel de lay-out van een site of blog. Het lijkt erop dat als je je blogposts en andere inhoud op sites als Digg en Delicious wilt promoten, je een lange lijst met knoppen aan je sjabloon moet toevoegen, zodat je iemands favoriete sociale bladwijzer of nieuwssite niet uitsluit.
Sociale geschiedenis is handig omdat het een test uitvoert om te zien waar de gebruiker recentelijk is geweest, en afbeeldingen naar die sites laadt, en alleen die sites. In wezen toont het de bezoeker alleen de knoppen die ze zouden willen zien.
Hoe weet SocialHistory.js? Door een leuk informatielekje te gebruiken dat is geïntroduceerd door CSS. De browser-kleuren bezochten koppelingen anders dan niet-bezochte koppelingen. Het enige dat u hoeft te doen is een hele reeks URL's laden voor de meest populaire sociale bladwijzersites in een iframe en zien welke van die links paars zijn en welke blauw zijn.
Glen Stansberry is een webontwikkelaar en blogger die meer worstelt dan hij zou willen toegeven met CSS. Je kunt meer tips over webontwikkeling lezen op zijn blog Web Jackalope.
Accentsconagua