Bra artikel om varför SVG är att föredra som bildformat

Smashing magazine skriver en bra artikel, där man pedagogiskt förklarar varför man bör använda SVG (skalbara vector bilder) bilder istället för rastrerade bilder.

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Att zooma in en rastrerad bild gör ju att den tappar i skärpa och de blir otydliga. Och vem zoomar in i bilder – ju de som ser dåligt. Det tror jag i och för sig inte att jag läste i deras artikel, men så är det.
En annan anledning som är mycket mer vanlig är att vi numera använder oss flitigt av responsive design, dvs att vi anpassar webbsidans layout beroende på vilken sorts device som surfar in på den. En mobiltelefon har mycket tätare med pixlar än en vanlig skärm. Därför så har man skalat upp pixel storlekar p på mobiltelefoner till gånger två. Om du satt en font storlek till 12 pixlar, så blir det gånger 2 på mobilen. Annars skulle vi inte kunna läsa. Samma sak händer med bilder och om du rastrerat en bild så blir de inte lika snygga på mobilskärmen. Därför är det bättre med svg…

SVG funkar numera på Explorer 9+, Firefox Chrome Safari 4+ och Opera 9,5+. Här är en lista på vilka browsers på mobiler som hanterar SVG och det är de flesta: http://mobilehtml5.org/

HTML 5 kompabilitet mobiler

http://mobilehtml5.org/

Högerklicksmeny med hjälp av HTML 5

Just nu är det bara Firefox 8 som stödjer context menus som finns i HTML 5 specen. Det är väldigt enkelt att koda ihop att fler menyer ska visas via högerklicksmenyerna.
Ett exempel på hur man kan koda detta finns på denna sida:

http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/

Adobe Edge – nytt animeringsverktyg baserat på Jquery

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.

Country selector omgjord till autocomplete

Bra förklarande artikel om de problem som uppstår med drop down selector med många landsval. Lösningen som även tar hand om problemet med att man skriver in sina lokala benämningar på länder, finns upplagd som open skuffa kod.

http://uxdesign.smashingmagazine.com/2011/11/10/redesigning-the-country-selector/

Boken HTML5 for webdesigners finns nu på webben

85 sidor, lagom långt,,

http://html5forwebdesigners.com/

Bra online test

www.loop11.com/

Intressant om transaktioner

http://www.boxesandarrows.com/view/storyboarding-ipad

Nytt verktyg för att göra prototyper

http://www.invisionapp.com

Invision ska tydligen vara ett smidigt verktyg för att göra prototyper.

Smart tidslinje för att visa arkiv av nyheter hos tidningen The Guardian

En arbetskollega tipsade om den här tidslinjen som The Guardian har gjort för att visualisera de arabiska protesterna. Tidslinjen går att dra framåt och bakåt med hjälp av en horisontell datum-slider och själva visningen av nyheterna är uppdelade i olika kategorier med färgmarkeringar i ”protester, regimändring, internationell respons”. Dessutom så har allt kategoriserats efter länder också, så man kan följa nyheter publicerade just efter ett land. När man håller musen över en färgmarkering så kommer nyheten upp till vänster.

Smakfullt och lättförståerligt. Dock gjord i Flash och inte interaktiv HTML 5 och JavaScript