Archive for the ‘HTML, XHTML, CSS’ Category

Font face support på mobiler.

januari 11, 2013

Här finns en lista på vilka mobiler som stödjer @font face. Skapad 12 oktober 2012

 

blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet

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.

Kolla av browser width med CSS och byt style

augusti 17, 2012

Här finns en bra förklaring till hur man gör och hur det funkar:

http://css-tricks.com/resolution-specific-stylesheets/

Exempel på kod:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
Fungerar i dessa browsers: IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+

SVG – vilka browsers stödjer och fördelar

augusti 7, 2012

Bra artikel om SVG och dess fördelar:

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

Online editors för att skapa SVG, som dock inte fungerar i Safari.. :
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
Har testat den och vid först tyckte jag att den var ruggigt bra på att göra om min png bild till en svg. Dock så fungerade svg filen inte i Safari, utan bara i Firefox. Sparade min ursprungliga vector till svg via Illustrator istället och då kom det ut heeelt annan kod som fungerade i Safari..

Aptana – hur man skapar FTP connection

augusti 6, 2012

Här finns en beskrivning om hur man skapar FTP connection i Aptana:

http://stackoverflow.com/questions/6201939/how-connect-to-remote-host-from-aptana-studio-3

 

 

 

Responsive design

juli 3, 2012

A list apart har skrivit en grundläggande artikel om ämnet. Poängen i artikeln är att flexible design funkar ner till en skärmupplösning på 800*600. Sen behöver man anpassa css:en för skärmstorleken.
http://www.alistapart.com/articles/responsive-web-design/

Matematisk uträkning av font storlek efter skärmstorlek
En annan lösning är att verkligen speca fontstorlek efter en matematisk uträkning, så att fonten hela tiden scalas upp efter skärmstorlek. Författaren har utgått från storleken 10 px = 1em i iPad- horisontellt läge. Därefter blir fronten 1 px mindre eller större för varje 78 px upp eller ned i skärmstorlek. Intressant approach som jag vill testa.

http://blog.responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence

rem istället för em
I ovan nämnda lösning är rem bättre att använda än font storleken em. Vilka browsers som stödjer rem finns listat här. 78% idag.
http://caniuse.com/rem

Hur man anger det i CSS:
http://snook.ca/archives/html_and_css/font-size-with-rem

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.

Konvertera flash till html 5

juni 30, 2011

Google har tagit fram verktyg Swiffy. Bra för att kunna visa samma innehåll på iPad och iphone. http://swiffy.googlelabs.com/

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>

Google lanserar sök på recept – Rich Snippets funktion

mars 3, 2011

Google fortsätter att utöka sökning av rich snippets. Nu har man lagt till sökresultat för recept som märkts med rich snippets. På vänstersidan av Googles söksida så hittar man filtreringen för Recipe View. Men dock ännu bara  lanserats i USA och Japan.
Rich snippets är Googles eget namn för att märka upp olika data i xhtml/html. Märkningen av data drivs egentligen microformat.org. Genom att lägga gränsnittskod runt om produkter, pris, böcker osv så kan man få exaktare sökträffar på enbart böcker, recept osv.  Här finns dokumentationen om hur man märker koden med hjälp av mikroformat, mikrodata eller RDF:a

Här hittar du specifikt hur du märker upp recept med hjälp av rich snippets (mikformat, mikrodata eller RDF:a märkning).

Så här ser sökresultaten ut på Google:
Recept filtrering på Google.