(category) LIST of posts

Styling til mobil


http://building-android-apps.labs.oreilly.com/ch03.html
Med ajax loades elementer ind i mobilversionen, fra en desktopversion.
Hvor JQeryMobile gav den lette version af en lignende struktur i en intern side, er bogens kapitel 3 en medium-svær udgave. Dog stadig med JQuery, som jo forenkler processen meget ved DOM scripting.

Godbidder fra bogens Kapitel 3

ellipsis

/*Forhindrer teksten i at blive for lang, og afslutter med forkortelsen "..."*/
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

-webkit-border-image

/*Kantbeskæring - top, right, bottom, left - med uret*/
    border-width: 0 8px 0 14px;
    -webkit-border-image: url(images/back_button.png) 0 8 0 14;

css3.info/preview/border-image/

-webkit-tap-highlight-color

/*Kun Android - fjerner link-kant*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);

ikon: apple-touch-icon-precomposed

<!--Icon til at gemme på springbrættet-->
    <link rel="apple-touch-icon-precomposed" href="myIcon.png" />

Flere apple head tags

I forbindelse med at gemme sitet på springbrættet som app.

<!--Vil på iphone gemme cachen-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
<!--Vil på iphone gemme statusbar-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--Splash page-->
    <link rel="apple-touch-startup-image" href="2.gif" />

Andre Styling ressourcer


smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/


css3wizardry.com/2010/08/19/css3-gradients-and-patterns/ bemærk: -webkit-background-size

Retina display og css

Differencieret grafik med media query

fra blog.iwalt.com

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

dryan.com/articles/posts/2010/6/25/hi-res-mobile-css-iphone-4/

JQuery Mobile

Fortsat –
http://jquerymobile.com/
Nu har I prøvet at bygge en side op med JQuery Mobile
Her er en link, der gennemgår de vigtigse features:
http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/

ikoner

http://www.komodomedia.com/download/#social-network-icon-pack
http://www.famfamfam.com/lab/icons/silk/

Variation over kak3 øvelse

- til også at indeholde funktionalitet fra kap 2
pixelsinmycoffee.com/aps/2-3/android.html

Design til mobil

Seamless tiles

Tutorials
http://www.freeseamlesstextures.com/texture_tutorials/index.htm
http://www.gfxartist.com/features/tutorials/740

Grafik optimering til web

Godmorgen!
Glemt alt om photoshop efter festlig weekend?
Kodimagnyler på kontoret..
enkelt gennemgang af web-optimering

Web optimering links:
http://www.karbosguide.com
egentlig for Elements, men fin for Photoshop

Dybdegående filstørrelses optimering for jpg’s
- samme slags behandling for gif’s

Transparente giffer

‘live’ liste over photoshop links – del.icio.us/tag/photoshop