Posts Tagged ‘HTML 5’

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

januari 24, 2012

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/

Annonser

Högerklicksmeny med hjälp av HTML 5

december 11, 2011

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/

Boken HTML5 for webdesigners finns nu på webben

oktober 26, 2011

85 sidor, lagom långt,,

http://html5forwebdesigners.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>

Ultimate CSS Gradient Generator

oktober 7, 2010

Min vän Martin Janner tipsade om denna:  Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

Fixar gradients med CSS kod. Coolt.