Archive for the ‘JavaScript’ Category

Collapsing sitemap on Axshare by default using plugins

maj 10, 2014

I´m currently working on a project where I have produced about 60 wireframes. I work in Axure and publish my wireframes for the projectteam on Axshare.
The problem is that Axshare opens (!) the entire sitemap – expanding all the treenodes per default. This is frustrating as it makes it very hard to find what you want.

So a collegue of mine googled and found  this solution for collapsing the nodes, but this was when exporting the project as HTML prototype. So I created this script for the plugin feature on Axshare. There will be a flash of the nodes expanding before collapsing.

Jquery code for collapsing the sitemap on Axshare:

Only tested in Chrome and Safari for now. 

<script type=”text/javascript”>

 parent.$("ul").find("ul").css({"display":"none"});
 parent.$("body").find('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus')
 parent.$("body").find('.sitemapPlusMinusLink').unbind();
 parent.$("body").find('.sitemapPlusMinusLink').toggle(
  function(){
   $(this)
        .children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
         .closest('li').children('ul').css({"display":"block"});
 },
  function(){
   $(this)
         .children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
         .closest('li').children('ul').css({"display":"none"});

}
);
</script>

Do the following:

1. Log in to Axshare.

2. On the ”My projects” view – click on the project link.

3. Then click on ”Plugins” in the menu for your project.

4. Click on ”New Plugin”.

5.  Give the plugin a name. For exampel ”Collapse the sitemap”.
Then choose ”End of the head” in the Location options.

6. Cut and paste the code above into Content

7. Save! And next time you refresh your projects link on Axshare it will work.

Adding javascript in the plugin for Asxhare

If you find ways to improve the code – tell me! Haven´t done scripting for several years…
I also sent a request to the development team for Axure and they answeared that they might implement this feature in the future.

Jeremy Keith: The Spirit of the Web

december 11, 2012

Jeremy pratar på Smashing Conferens 2012 om The Spirit of the Web.
Här finns videon på Vimeo.

Referat från föreläsningen:Har webben en själ?

Webben är routers, servers, inte ett cloud.  Men det vårt att förklara vad webben är. För vissa är det shopping och andra är det information.

”The web is agreement”.Vi kommer överens om att använda standarder, protokoll osv.

Men, filer, URL, HTTP…

POST är det viktigaste verbet. handlar om adda saker, deleting saker.
GET är inte delete.

Basecamp använde delete links. Men google accesselorator tool som folk hade installerat hämtade länkar i förväg och så plötsligt så deletades deras filer… Så helt fel att använda länkar för deletes. det är post.

Log out är inte heller länkar utan knappar!

GET – man hämtar filer. Mest html filer,css, javascript som vi hämtar. Vi pratar om webbsidor, webb app. Men de här sidorna kan presenteras på olika devices och vi vet inte vilken kapacitet, storlek, nätverkshastighet som betraktarna har. Webben handlar inte om att skaparna har kontroll, utan en massa saker vi inte vet. Förr bestämde vi att alla sajter skulle vara 640*480, sen 800*600 och därefter 1024*768…
Kontroll är inte en del av webbens själ!

Läs ”A Dao of Web Design” av John Allsopp som han skrev för 12 år sedan på A List Apart. Handlar om att acceptera att vi inte vet hastighet, skärmstorlekar och att vi inte har kontroll som designers och utvecklare.

Photoshop – innan du ens har börjat så måste du ange storlek. Så innan du ens kommit igång så kräver verktygen att du ska vara i kontroll. CMS gör också antaganden av hur content ska vara och se ut.

Style Tiles – använd inte layout och inte bestämd storlek. Börja med de individuella bitarna som ska skapa sajten, som byggstenar. Som ett mood board. Jeremy visar upp ett bibliotek med html/css element.

Börja med content istället för skapa ett ramverka att hälla i content i. Börja inifrån och ut med responsive design. Det betyder inte att man ger upp kvalitet för att man ger upp kvalitet. Responsive är mer en konversation mellan användare och content.
”My website will meet you wherever you are”

”Fluid is in the spirit of the web” – jeremy visar den första webbsidan som gjordes i olika skärmstorlekar.. (bara text förstås.)

Keeping a website responsive. Progressive enchancement, starta med det lägsta och ge nya devices allt det där som de klarar av i olika lager. Byggstenarna är strukturer, beteende och presentation. Tex vid javascript – fråga webbrowsern om den förstår geolocation och om den klarar det så bygger vi vidare på det. Progressive enchancement är att  webbsidor behöver inte se likadana ut i varje browser. Då accepterar man att man inte längre har kontrollen. Testa istället om det fungerar.
Men du kan inte testa på alla devices… Jeremy köpte en massa och de låg bara där, så han skrev på Twitter att de var fria att använda. Inom 24 -4 8 h så hade massa andra kommit över med deras devices till hans labb i Brighton. Share är just vad som är internets spirit. GitHub är absolut sharing, där du kan ta upp ngn annans arbete och använda det.

Responsive images. Vi började med hacks och workarounds, men det funkar inte i längden, därför behöver vi en standard (Srcset) eller filtypernas format (JPEG2000) ska vara responsive i sig. Men just nu måste vi använda oss av hacks och javascript.De flesta hacksen följer dessa regler – börja med den lilla formatet och ladda sedan ned det stora om det behövs. Men vi vill ju inte ladda ner båda båda två. Men tänk så här:

I CSS kan du säga att den lilla bilden ska skalas upp till en större bild, men du kan via javascript sedan byta ut bilden till det stora. För användarens är upplevelsen bra även om man laddar ner två. För de får ju snabbt upp en bild, om än den först ser lite hackig ut innan den byts ut mot den nya som laddats ner. Kommer ni ihåg lowsrc? Visade en mindre filstorlek medan man laddade ned den större bilden. Det är samma sak här, som när vi inte hade höghastighets internet.
Jeremy lägger inte ned energi på att göra olika bilder, utan på att göra filstorleken på bildstorleken mindre istället. Använder ”content-is-first” metod. Vad är viktigast i bilden? Ansiktet? Ok, då kan du göra det andra mer blurrigt och spara på kb. Förr i tiden hade vi ett mål på 100 Kb per, men nu är vi uppe på 1 mB istället. Vi har alltså samma problem nu med responsive som förr då vi hade sämre hastighet på nätet. Det värsta som finns är när ngt är slött och tar lång tid att ladda ner – performance!

Steve Sauders.

Conditional loading for files. Vilka MÅSTE vara med i på webbsidan? Lägg sedan till saker. Jeremy lägger till mer grafiska element med javascript. Te x video att titta på. Reducera antalet http requests.  Tänk inte att ni måste ha med Bootstrap, jQuery osv. Vänta tills ni har problemen! För CSS finns det massor av ideer för att minska storlek request te x; CSS Sprites, base-64 encoding, gradients, rounded corners. Det här är varför man pratar om MOBILE first

Glömt inte att URL är delar av hur man hittar fram till dokumentet, dvs filstrukturen och vad sökvägen har döpts till. Ex: /things/add/
URLer är definitiv internets själ.

Bra artikel om JavaScript och jQuery.

oktober 12, 2012

Smashing Magazine skriver om hur man gör bättre JavaScript APIs. Bland annat om hur man skriver kod så att den blir mer lättförståerlig och läsbar. och hur man effektiviserar användandet av jQuery.

http://coding.smashingmagazine.com/2012/10/09/designing-javascript-apis-usability/

Testa jQuery kod

augusti 29, 2012

Här finns ett api för att testa:
http://qunitjs.com/

”To use QUnit, you only need to include two QUnit files on your HTML page. QUnit consists of qunit.js, the test runner and testing framework, and qunit.css, which styles the test suite page to display test results:”

Utkomsten blir detta i browsern:

 

 

 

 

 

Här finns tydligen en till debugger för jQuery:

http://pivotal.github.com/jasmine/

Adobe Edge – nytt animeringsverktyg baserat på Jquery

november 21, 2011

Adobe skapar ett nytt verktyg som skapar animeringar med hjälp av Jquery och som kommer konkurrera med sin egen produkt Macromedia Flash. Man måste säga att Adobe är med på banan eftersom flash snart verkar ute ur leken. Än så länge skaps ingen CSS animering, men eventuellt när webbläsarstödet ökar. Man kommer att kunna växla mellan att jobba med animeringen i programmet och att skriva kod i de javascriptfiler som skapats. Programmet ska enligt utsago inte göra ändra i befintliga css och html filer, vilket är sådant som kan vara mycket retsamt… Och naturligtvis har det stora likheter med Macromedia Flash om än så mycket simplare.
Någon gång i år ska det släppas och då under annat namn.

Smart sökfunktion på New York Times Magazine Services

juli 17, 2011

En kollega till mig på InUse tipsade om den här sökfunktionen på New York Times Magazine Services. När man ställer markören i sökfältet så får man välja vad man vill söka i för olika källor: I enbart tidningens artiklar eller i enbart bloggar, eller i allt på en gång. Man kan också välja att filtrera på restauranger, städer osv. Dropdownen med valen i ligger kvar efter att man har valt, så först när jag trycker på sök så försvinner den, om jag inte fört bort musen från sökens area, då försvinner den med ett tidsintervall.

Smart funktion som jag själv förstod direkt efter en millisekunds tvekan. Skulle vara intressant att testa på mer ovana webbanvändare.

Sökfält

Placeholder – HTML 5

maj 23, 2011

Placeholder är ett tillägg till formulär fält för att förtydliga för användaren vad man ska ange i fältet.
Det som man angivit i placeholder attributet syns som text i formulär fältet.
Robert Nyman har skrivit här, om hur man via javascript kan se till att texten inte försvinner förrän användaren verkligen börjar att skriva i fältet. Alltså istället för att användaren ställt markören i fältet.

Det ersätter inte label attributet så klart. Title attributet ska fortfarande användas om man behöver ge en längre förklaring till fältet. I annat fall så är placeholder alternativet.

Browsers som idag stödjer placeholder är följande (maj 2011):
Firefox 3.7+, Safari 4.0+, and Chrome 4.0.

Exempel från w3c

<fieldset>
<legend>Mail Account</legend>
<p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
<p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
<p><label>Password: <input type="password" name="password"></label></p>
<p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
</fieldset>

Node.js – skapa webbserver med javascript

oktober 24, 2010

Det låter otroligt konstigt, men det är de facto sant. Enligt de som skapat node. js så är detta mycket bättre än dagens webbserverar där det trådbaserade nätet ger hög belastning på servrarna. Så node principen ska vara mycket bättre. Förstår inte detta helt och fullt, men det låter galet intressant.
Verkar som om det går att knyta an databaser som MySql.

http://nodejs.org/

Sensa Touch – javascript bibliotek för appar

juni 29, 2010

Kommer att revolutionera webbapparna, precis som JQuery och Prototype gjorde för webben.

http://www.sencha.com/

Finns för både iOS och Android.

Apple 5 i Safari

juni 4, 2010

HTML 5 och CSS 3 demo. Coool;)

http://www.apple.com/html5/