(category) LIST of posts

Video html5 og Android

Foreløbige noter samles senere til en mere dækkende artikel:

Egentlig tyder det på et problem med video generelt og Android – og altså ikke vedrørende html5

Video-tag vil tilsyneladende kun bestemte formater i Android
for eksempel: 3gp.

Link til liste over video convertere til android format:

Augmented Reality

Det klassiske forståelseseksempel er flyverens display med sigtekorn og info, og Terminators synsdisplay af info og kommandoer for handling.

Virkelighed / real time + virtuelt lag (3D) + interaktion.
Mobil: Virkelighed / real time + virtuelt lag (internet) + interaktion.

1 – typisk gennem videokamera – kode genkendes, typisk 3d lægger sig imellem bruger og display. (At prøve noget foran speglet)
2 – typisk gennem kamera (At pege på noget, og få udviddet display)

Mashability potentiale

Data forbindes med geolocation og måske kompas og accelerometer for vinkel og så er der mulighed for et AR-lag.

Telefonen bliver andet og mere end et kommunikations og underholdnings apparat, men en digital følgesvend. Mulighed for at interagere med verden omkring.

Systemet lokaliserer sigselv og downloader tekst, links, billeder (fra fx. app’ens egen database, APIs, RSS) – omkring brugeren, eller med relevans til hvad brugeren peger på.
Kan også give brugeren mulighed for at tilføje data og bidrage.

Imagery recognition :Billedmateriale fra telefonen sendes til en central computer, som så kan bestemme hvad telefonen peger på og sender data tilbage, som grafisk overlay til displayet.
Low-tech implementering er QRrcodes – en stærk og anvendelig feature. Også for Reklamevirksomhed, en billig og direkte adgang til målgruppe via lokalisering.

Ung teknologi

Batterikrævende, Location præcision +- 20m, responstid i kompas, manglende dybdefølsomhed.

Links

http://en.wikipedia.org/wiki/Augmented_reality
http://www.pcadvisor.co.uk/news/index.cfm?newsid=3212410&pn=1 –
http://www.metaio.com/
http://www.pranavmistry.com/projects/sixthsense/ eller hvis videoen ikke virker http://www.ted.com/talks/pattie_maes_demos_the_sixth_sense.html

Mobil ressourcer

For wordpress

<?php if ( $is_iphone ) {?>
     // mobile template
<?php } else { ?>
     // regular template
<?php } ?>

Virker også for android – (men ikke for palm og blackberry)

Utilities og generatorer

Browser

detectmobilebrowsers.mobi generator og script

CSS

gradients.glrzad.com gradient generator
css compressor

Android apps

http://www.androiddownloadz.com/android-apps
http://www.freewarelovers.com/android
http://www.freeandroidware.com/apps/

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