jQuery Mobile – vad kan vi förvänta oss?

För oss som är jQuery intresserade så har vi nog inte missat att jQuery gänget gått ut med jQuery Mobile. Ett webbramverk för smartphones och tablets. jQuery Mobile tar “write less, do more” till en högre nivå, istället för att göra olika webbapplikationer för olika smartphones och tablets så med jQuery Mobile så kommer man kunna göra en webbapplikation som fungerar på de flesta (läs: vanligaste) smartphones och tablets.

Både iOS, Android, BlackBerry, Windows Phone, palm web OS och Symbian är supportade av ramverket. Tar man en titt på designen av UI dom presenterat så ser det väldigt bra ut. ThemeRoller kommer finnas tillgängligt för att ändra färger på UI. CSS3 stöd kommer att finnas, kanske inte för allt men för det mesta.

Vad vi kan förvänta oss är alltså ett unikt mobilramverk från jQuery gruppen som är väl designat och lätt att bygga ut med sin egen kod. Man kommer också ha support för de vanligaste smartphones och tablets.

Nu finns det en anledning till att älska jQuery? Man kan följa jQuery Mobile projektet på jQuery’s Twitter eller på projekt blogg.

Hantera HTML5 audio via JavaScript

Att börja bygga sin egen kontroll till HTML5 audio är inte alls så krångligt som man kan tro. Alla har vi nog använda

var elm = document.getElementById('post');

För att få tag i vår audio tag så måste vi alltså ha ett id på vår tag, “player”. Nu kan vi använda denna kod för att spela och pausa låten.

// play
document.getElementById('player').play();
// pause
document.getElementById('player').pause();
// börja 20 sekunder in i låten
document.getElementById('player').currentTime=20;
document.getElementById('player').play();

Med jQuery.click kan man skriva såhär:

$('a.play').click(function() {
	document.getElementById('play').play();
});

För att höja eller sänka volymen så använder man sig utav denna kodsnutt

// volume up
document.getElementById('player').volume =+ 1;
// volume down
document.getElementById('player').volume =- 1;

Andra saker man kan hämta ut från audio taggen

// filnamnet
var filename = document.getElementById('player').src;
// duration (låtens längd)
var duration = document.getElementById('player').duration;
// currentTime (var låten befinner sig)
var currentTime = document.getElementById('player').currentTime;

Lite ledigt

Nu blir det lite ledigt från bloggen, hela v30 så är jag i New York, USA på semester. Men vem vet, det kanske regnar en kväll i New York och jag har tråkigt då kan det allt komma ett inlägg!

Tips: resizeMyBrowser

resizeMyBrowser är mycket bra webbapplikation jag börjat använda mig av.

Inte minst när jag skapade en iPhone webbapplikation och då ville jag minska mitt webbläsarfönster till 320x480px för att få samma upplösning som iPhonen har på mitt webbläsarfönster.

Det resizeMyBrowser gör åt dig är att minska ditt webbläsarfönster till den upplösningen du väljer. Lättare kan det nog inte bli!

Tips: Bounce app

Bounce app är en relativt ny webbapplikation av ZURB, som låter dig snabbt och enkelt ge feedback till en webbsida.

Deras webbapplikation tar en skärmbild av den webbplatsen man vill ha feedback om och då kan man göra markeringar överallt i designen, t ex skriva små kommentarer.

Man kan sedan dela med sig av sina kommentarer via Facebook, Twitter eller helt enkelt en vanlig url.

Märkte när jag testade Bounce att den hade lite konstig färgskala, om det är ett fel vet jag inte, men det ser inte så bra ut?

Jag kommer nog börja använda Bounce mer, blir lättare att påpeka exakt vad man tycker inte ser bra ut, eller vad som är fel.

Bounce – Learn about Bounce

CSS tips: outline

CSS outline är en CSS egenskap man lätt kan glömma bort, som standard så har man outline på till alla fällt, länkar osv.. allt klickbart.

Men har man outline på, så blir det inte speciellt snyggt med designen ifall t ex ett textfält visar blått omkring när man har en helt andra färger på sidan. Jag säger inte att outline är dåligt på något sätt, det är ett bra sätt att visa för användaren att “nu är du i rutan, nu skriver du här i”

Med outline på:

Utan outline:

Jag själv har satt outline: none; på min blogg då jag inte tycker det passar in i designen att ha t ex blått omkring ett fällt.

HTML5 Böcker

Det är ett bra tag till HTML5 är klart, men idag finns det redan mycket HTML5, även böcker om HTML5. Webbplatsen, A List/Book apart har släppt en bok “HTML5 For Web Designers” som är skriven av Jermy Keith.

Själv tänkte jag nog köpa boken (har beställt boken), för att få en bättre bild av allt HTML5 erbjuder. Specifikationen för HTML5 är på 900 sidor, att läsa den tar ett tag. Boken är på 85 sidor och det tar inte så lång tid att läsa. (Priset ligger på 270kr ungefär)

På Adlibris finns det ett helt gäng med böcker, men “HTML5 For Web Designers” är en av de få böckerna jag sett bra reklam för.

Har du läst en HTML5 bok? Isåfall vilken?

jQuery tips: Räkna antal tecken i en textruta

Att räkna antal ord man har kvar när man skriver i en ruta, precis som Twitters 140 ord räknas ner när man skriver ett ny uppdatering. Jag tänkte tipsa om hur du gör det med jQuery, samt hur man räknar upp.

Vår HTML kod ser ut såhär

<p class="char-count"></p>
<textarea></textarea>

Vår jQuery kod ser ut såhär, notera att du måste ta bort en av keyup funktionera för att kunna testa, annars krockar dom.

$(function(){
    // Räkna upp
    $('textarea').keyup(function() {
        $('.char-count').text($(this).val().length);
    });

    // Räkna ner
    $('textarea').keyup(function() {
        var max = 140;
        if(max < $(this).val().length) $('.char-count').css("color", "#FF0000");
        $('.char-count').text(max-$(this).val().length);
    });
});

Jag har valt att ändra färgen på numrena ifall det blir negativt tal på räkna ner funktionen

Demo

Inspiration var det ja!

Vi har nog alla vår egna små smultronställen att hitta inspiration ifrån. Tänkte tipsa om ett par sidor som jag brukar kolla upp när jag letar efter inspiration.

• CSSMania.com – En av de bättre sidorna med CSS galleri med 100-tals sidor.
• Colourlovers.com – Färger, det är så vackert. Mycket bra sida för att hitta färg inspiration på.
• Forrst.com – Jag har inte vart medlem så länge, men hittar mycket bra inspiration där. Tyvärr är det en stäng sida, men man kan alltid ansöka om medlemskap.
• CSSRemix.com – Ännu en sida med massor utav snygga webbplatser.
• Flickr.com – Mycket bilder, där kan man spendera timmar ifall man hade den tiden.

Man kan få inspiration av vad som helst, det viktiga är att färgerna passar in med varandra så ingen färg skär en annan, det kan bli jobbigt för ögat då.

Tips: Launchlist.net

Launchlist.net, en sida där du kan checka av ifall din sida är klar för att rullas ut.

Det kan vara ett bra sätt att avgöra ifall ditt nästan projekt är redo för användarna. Mer läsning: 50 Powerful Time-Savers For Web Designers/