Vertica Blog

HTML5 WebSockets: internet - nu som dialog!

Christian Holm Nielsen — Thu, 16 Feb 2012 14:44:00 +0100

I forhold til HTML5 går meget af snakken omkring de rigere brugeroplevelser, og i vid udstrækning udviklingen af mobilsites i bredeste forstand – altså alt fra telefoner til tablets. Det handler om at lave lækre mobile oplevelser med sprøde effekter og simpel interaktion. Det fokus skyldes naturligvis at brugere verden over har taget smartphones og tablets til sig, og det er blevet en naturlig og central del i manges hverdag at arbejde med mobile enheder.

Ud fra et rent teknisk synspunkt er det imidlertid ikke der hvor der er de største nyheder i HTML5. Ingen tvivl om at det har stor værdi at vi bedre kan udtrykke styling, animationer og at vi kan arbejde med rigere formularer. De ting har vi dog egentlig kunne løse før, det har bare været mere besværligt, ustandardiseret og javascript tungt.

Som udvikler er det derfor en større nyhed at der er mulighed for at anvende telefonens GPS til at vide hvor brugeren befinder sig, eller kameraet til at læse stregkoder. Endnu mere grundlæggende er det interessant at vi får mulighed fra at supplere http protokollen, som internetter helt grundlæggende bygger på, med andre former for kommunikation.

Udgangspunktet

Selvom man som bruger ikke tænker over det i hverdagen er http begrænset af at alt kommunikation foregår ved at klienten, som oftest brugerens browser, efterspørger noget på en server som sender det retur. Kommunikationen foregår et kald af gangen, uden nogen fast forbindelse imellem klient og server. Det vil sige at serveren i princippet ikke ved hvem klienten er, hvilket man så omgår på forskellige måder. Det der sker er i alle tilfælde at klienten selv sender noget med som serveren kan bruge til at identificere klienten, og derved kan serveren gemme oplysninger, holde styr på hvem der er logget ind osv.

Hvorfor et der så et problem tænker du måske? Det er det heller ikke nødvendigvis, med den måde vi bruger internettet på idag, hvor vi surfer rundt imellem forskellige sider for at søge information. Begrænsningen viser sig når man vil lave værktøjer hvor brugeren skal arbejde med data som hele tiden opdateres. Fordi serveren ikke har mulighed for at skubbe data til klienten løser man det ved at klienten bliver ved med at spørge serveren i et givent interval. Som du sikkert kan forestille dig er det ikke nogen særlig effektiv måde at kommunikere på.

Tænk hvis du hele tiden skulle spørge din bedre halvdel om han/hun havde noget at sige, fordi du var den eneste der havde mulighed for at indlede hver enkelt sætningsudveksling. Selvom nogen måske ville tænke det kunne være rart, da man så kunne få noget ro, så vil det være ret vanskeligt at få en dagligdag til at fungere.

Det nye

Som en del af HTML5 kommer der to måder hvor serveren kan sende beskeder til klienten, hvilket er server sent events og websockets.

Server sent events fungerer ved at klienten kan abonnere på events som serveren udstiller, så det er stadig envejs kommunikation over http – det foregår bare den anden vej. Server sent events vil eksempelvis kunne bruges til at pushe statusopdateringer og nyheder ud. Server sent events har sin styrke i at det er ret nemt at implementere og bygger et godt stykke hen ad vejen på velkendt teknologi. Server sent events er implementeret i nyere browsere med undtagelse af IE.

Websockets tilbyder tilgengæld low level, full duplex kommunikation imellem server og klient via en helt ny protokol. Det åbner helt nye muligheder for direkte og hurtig kommunikation imellem server og klient. Derved vil man kunne lave systemer hvor brugere kan samarbejde i real-tid, spille spil eller i det hele taget bare få en virkelig hurtig og lækker brugsoplevelse. Idag vil man installere Skype, Live Messenger o.lign på sin egen pc, men det vil muligvis slet ikke være nødvendigt nu kommunikaitonen kan foregå i browseren via websockets. IE får websockets med fra version 10, Safari og Opera har delvis support allerede og Firefox og Chrome har allerede fuld support idag. Den gode nyhed for IE er imidlertid at Microsoft efter sigende anser det for at være en meget vigtig teknologi, så de vil efter sigende “gå længere” med deres implementering af websockets – hvad det så end kommer til at betyde.

SignalR

Der findes et antal forskellige implementationer af websockets server side blandt andet Socket.IO til java og node.js, jetty til java og EM-WebSocket til Ruby.

Til .NET er der et for tiden meget omtalt projekt på github som hedder SignalR, som bliver udviklet af David Fowler og Damian Edwards. SignalR har de ting man skal bruge for at det er nemt at arbejde med i .NET – inklusiv nuget pakker til installation og en pakke med et eksempel, som man blot kan installere hvis man vil se en hurtig demonstration.

SignalR skiller sig ud på den måde at det indeholder alt hvad man skal bruge både på klient og server for at bygge interantive realtime, multi-user applikationer. Det er opdelt sådan at SignalR.JS, SignalR.Client og SignalR.Client.WP7 er libraries man kan bruge som klient og SignalR.Server kan bruges til at hoste en server eller Azure kan bruges som host.

Det er implementeret sådan at det kan bruges på tværs af flere browsere fordi det kan degradere pænt. Det vil sige at websockets bliver brugt til kommunikation hvis det er muligt, men hvis det ikke er tilgængeligt vil der istedet blive brugt long polling og Ajax. Så man får en konsistent programmeringsmodel der anvender den bedste form for transport der er til rådighed. Med andre ord vil det være muligt at bruge idag, med nogen af de samme design overvejelser som jeg før har været inde på i forhold til polyfills. Kort genfortalt er spørgsmålet – kan man leve med at performance ikke er den samme på de browsere der degrader, imod at man får nogle muligheder man ellers ikke har?

I den helt nørdede ende er der en ret sjov demo hvor SignalR er blevet brugt til at løse “the Shakespearean monkeys problem”, som er interessant hvis man er til den slags. Det er jeg, så synes liiige den skal nævnes…

Opsummering

WebSockets giver mulighed for at bygge nogle løsninger som ikke tidligere har været mulige, og netop derfor er en stor del af udfordringen lige nu at få den gode ide, hvor man udnytter potentialet. Selvom jeg, i alt beskedenhed, lister nogle områder hvor det kan være interessant er det ikke særligt kreative bud. Hvis jeg havde den gode ide sad jeg nok heller ikke her og skrev, men var nok igang med at implementere den allerede :)

Sandheden tror jeg er at de fleste gode ideer opstår i samarbejde imellem kunder og udviklere. Så hvis du eksempelvis skulle have en god ide til hvordan din løsning kunne blive bedre ved at brugere i realtid kan samarbejde om design, sammensætning af produkter eller bare gøre kommunikationen i virksomheden mere effektiv, så kan det være tid til at se på at føre den ud i livet. Kom med dine forslag og lad os diskutere mulighederne, så de kan blive realiseret.

Teknologien er ny og rimeligt grøn, men værktøjerne er under udvikling, og det er et område hvor det går stærkt. Nogen software producenter er allerede begyndt at implementere websockets i deres serverløsninger. Blandt andet har google talk implementeret web sockets, så det vil sandsynligvis bliver flere muligheder for at anvende teknologien uden at man selv skal bygge både server og klient fra bunden. Det bliver I hvert fald spændende at se hvad teknologien ender med at blive brugt til i praksis – så jeg vil vride min hjerne og se om jeg kan komme med et bidrag til udviklingen…

Microsoft Azure Service Bus EAI og EDI og BizTalk 2010 R2

Troels Riisbrich Underlien — Wed, 15 Feb 2012 15:21:21 +0100

Inden jul skrev jeg generelt om begreber i cloud og hvorfor og hvordan det påvirker integrationsverdenen – se indlægget om Cloud og Integration.

Hos Vertica arbejder vi som udgangspunkt indenfor Microsofts teknologistak og vores base for cloud er derfor Microsofts bud på en platform, Azure, og her kom der helt op til jul nogen meget spændende udmeldinger med annonceringen af Azure Service Bus EAI og EDI features og næste version af BizTalk – 2010 R2.

Med lanceringen af de to nye features i Azure (EAI og EDI) har Microsoft eksekveret i forhold til det de har hintet til i noget tid – at Azure skal spille en rolle, som integrationsplatform (en stor rolle) og at de features, der i dag findes i BizTalk på sigt skal være tilgængelige, som en service i Cloud.

Azure Service Bus EAI (Enterprise Application Integration) giver os mulighed for at modellere et flow af data mellem endpoints (services) vi udstiller og et eller flere endpoints, der leverer data til forretningssystemer – direkte eller gennem services.

Modelleringen foregår grafisk i Visual Studio, som set i billedet her over og undervejs i et flow kan data valideres og transformeres og der kan hives data ud, til brug for rutening, således man kan styre, hvor data ender baseret på indhold.

Hvad angår, Azure Service Bus EDI, der er smallere fokuseret end EAI featuren og kun handler om udveksling af EDI dokumenter mellem to parter, kan vi i Visual Studio udelukkende arbejde med skemaer og transformeringer for vores EDI dokumenter.

Efterfølgende deployes de til en Azure EDI Portal, hvor der kan oprettes EDI Partnere og EDI Agreements – en udveksling mellem to partnere. For en agreement konfigureres, hvor dokumenter hentes, hvordan de valideres og transformeres og hvor resultatet af behandlingen sendes hen.

EAI og EDI – klare tråde tilbage til BizTalk

Det hele klinger meget bekendt, hvis man kommer fra BizTalk verdenen og det er da også BizTalk skemaer, der anvendes til validering og som udgangspunkt for transformeringer.

Til transformeringerne er BizTalk maps til gengæld droppet til fordel for et andet format, ligesom arbejdet med dem foregår i et helt nyt værktøj (der dog ligner BizTalk mapperen) – som en lille kommentar, er der allerede kommet et værktøj til migrering af BizTalk maps til det nye format: http://btmmigrationtool.codeplex.com/ (der dog, som de skriver er ”best effort”).

EAI og EDI – et tidligt syn, der lover godt

For EAI mere end EDI gælder at alt, det der er, i princippet fungerer, men har en tydelig fornemmelse af at være tidlige versioner med mange mangler, hvilket for alvor kommer til udtryk, når man fra Visual Studio deployer til Azure.

Her findes de to største problemer ved de nuværende udgaver af såvel EAI som EDI: der findes hverken administration eller lagring/tracking efter deployment – vi er ikke i stand til at følge data, finde eventuelle fejl eller ændre ting, der klart burde forventes at være konfigurer bare (serviceadresser, database forbindelser osv.). Vi kan ikke engang standse/starte de ting vi har sat i gang.

Alt sammen noget, der selvfølgelig må forventes af komme efterhånden – ligesom EDI helt sikkert også kommer til at understøtte andet end X12, som nu.

Og i sidste ende er det vigtigste egentlig også at Microsoft på den korte bane viser hvilken retning de arbejder i og at den retning har så spændende et potentiale, som man må sige den har.

På den længere bane bliver det så bare interessant at følge udviklingen af de to features og få udmeldinger om roadmaps og opdateringer og få viden om hvornår vi kan regne med at anvende de to features i reelle løsninger, så vi kan integrere i cloud baseret på Azure.

http://blogs.msdn.com/b/windowsazure/archive/2011/12/16/announcing-the-service-bus-eai-amp-edi-labs-release.aspx

BizTalk 2010 R2

Lokalt hedder integrationsværktøjet stadig BizTalk server, hvor der også op til jul, kom nyheder i form af annonceringen af næste version af BizTalk, der kommer til at hedde 2010 R2.

Sammen med et generelt løft til nyeste bølge af Microsoft platformen må det klart mest interessante ved denne version være signalet om det fortsatte fokus fra Microsoft og udviklingen i arbejdet med at koble BizTalk server sammen med Azure.

Her har vi i noget tid, via BizTalk Connect, haft muligheden for at tage lokale services på vores BizTalk og udstille dem til omverdenen gennem Azure.

Services, der som på tegningen, enten er koblet til BizTalk eller direkte til et forretningssystem gennem en af BizTalks LOB adapters.

Med 2010 R2, lover Microsoft at gøre BizTalk endnu bedre til at trække på cloud , både hvad angår teknik og licensering, for eksempel ved simpelthen at gøre det muligt at hoste en BizTalk på virtuelle servere i Azure.

For BizTalk, som ved Service Azure Bus bliver det spændende at følge den videre udfordring.

http://blogs.msdn.com/b/biztalk_server_team_blog/archive/2011/12/08/biztalk-server-2010-r2.aspx

Se videoer om mobil e-handel

Tove Keldsen — Wed, 15 Feb 2012 09:29:00 +0100

Hvordan kommer man godt i gang med mobil e-handel? Skal man satse på apps eller mobilweb? Og hvordan ser markedet for mobilbetaling egentlig ud? Vertica og FDIH satte på et seminar i januar fokus på mobil e-handel.

Se videoerne og find nogle af svarene her.

Update: Mobil E-handel 2012

Apps eller mobil web – hvad vej går udviklingen inden for mobil e-handel? Verticas direktør Jeppe Hansen satte fokus på de vigtigste trends og tendenser og gav sit bud på fremtidens mobile handelsløsninger.

Mobildesign: Den gode købsoplevelse

Kunderne har taget mobile enheder til sig som et indkøbsredskab, og det tvinger e-handlere til at gentænke den gode købsoplevelse: Hvad der fungerer på en desktop fungerer ikke nødvendigvis på mobilen. Få konkrete råd til udvikling af effektive mobile løsninger af Verticas User Experience-ekspert, Lars Christensen.

Besøg Verticas videokanal og find flere videoer om mulighederne med mobilteknologi.

NMoneys 2.2

Daniel Gonzalez Garcia — Mon, 13 Feb 2012 23:58:44 +0100

It is hard to believe the last release was on September. That only means one thing: I was about time!

There are quite a few changes in the release, so I will get straight to the point(s)

Money Allocation

2.2 should be a happy release. Why? Well, besides the fact it is the first release in more than 6 months it is the first one that contains code contributed by someone else but me.
Thank you, Berryl, for the feature, let’s hope it’s useful to many.

The problem that we try to solve is a simple one: we have a certain amount of money and we want to allocate it amongst several recipients. If we are lucky (and so are the receivers) the amount can be distributed evenly and so every recipient will receive the same amount of money. But most of the time that is not the case and we since money cannot be subdivided forever (there are no coins for one thousandth of a euro, for instance) we need to find away to distribute the money as fair (or unfair) as possible.

How to allocate a monetary quantity? Invoke .Allocate() on the quantity. How is the remainder distributed? An implementation of IRemainderAllocator will decide. There a some ready to use implementations, accessible using the static factory RemainderAllocator: FirstToLast, LastToFirst and Random. The significant decimals of the currency of the monetary quantity are used to determine the minimal amount of money that can be allocated.

Money[] allocated = 8.3m.Usd().Allocate(4, RemainderAllocator.LastToFirst);
Asscert.That(allocated, Is.EqualTo(new[] { 2.07m.Usd(), 2.07m.Usd(), 2.08m.Usd(), 2.08m.Usd() }));

Money[] allocated = 34m.Jpy().Allocate(4, RemainderAllocator.FirstToLast);
Assert.That(allocated, Is.EqualTo(new[] { 9m.Jpy(), 9m.Jpy(), 8m.Jpy(), 8m.Jpy() }));

Of course, no one prevents passing a custom IRemainderAllocator as long as the allocator distributes all the money.

ISO is as ISO does

NMoneys claims to implement the ISO4217 standard for the .NET platform. That was accurate to a certain extent. It is true all currencies defined in the standard were present. But not all the information they contained was as the standard defines, because the baseline of the information was not the standard, was the information contained in the .NET culture tables.

But from this version on, all currencies will have the name as defined in the standard list (except some Bond Market units that lost their prefix).

But most importantly, currencies will have as many significant decimal digits as the specification says.

As a result, a bunch of currencies have changed name and precision. For a complete list, head to the Changelog.

Get it while it’s hot

As usual, visit the download page for the latest binary package. Or update/install the Nuget package. Or let the hipster in you install the Ruby Gem.

Oh, and if you like what you see. Spread the word, contribute or, simply, use it.

Om håndtering af søgemaskiner og dybe links i AJAX applikationer

Morten Pedersen — Mon, 30 Jan 2012 15:32:00 +0100

I AJAX applikationer håndteres brugerens interaktion løbende, indhold genereres og indsættes I siden dynamisk. Dette er en vigtig del af et moderne responsivt user interface.

Men når brugere ikke længere klikker sig rundt mellem egentlige sider, kræver det en ekstra indsats, at balancere url’er, funktionalitet og indekserbart indhold til søgerobotterne.

Dette indlæg er en oversigt over mulighederne, og skulle gerne give dig et forspring I dit næste AJAX projekt.

Sidetilstande og url’er der kan bogmærkes

Reelt set er der to vigtige ting vi gerne vil opnå:

At kunne skifte browserens url uden at det resultere I en tur omkring serveren.
At kunne sammenholde disse url’er med bestemt indhold og funktionalitet.

I moderne browsere giver history.pushState() fuld kontrol, så vi kan styre browserens history og skifte url’er direkte på klienten. Dette kan være en vilkårlig (men gyldig) url indenfor det domæne man nu måtte være på. Med onpopstate, der er et event der kører I browseren, kan man så lytte på om url’er ændre sig og loade relevant indhold og funktionalitet.

I de fleste tilfælde har man dog behov for, at understøtte flere browsere, og bliver derfor nødt til at benytte location.hash og onhashchange eventet, som begge er godt udbredt. Konceptet er at man benytter dokumentets hashfragment (ankerpunkt), til at emulere url- strukturer pg parametre.

Det kunne se således ud:
site.com/search.aspx#?term=foo&filter=bar

Eller denne lidt pænere:
site.com/search.aspx#/foo/bar/or/what/ever

Så længe det er en gyldig url, kan man bare selv fastsætte formatet, og hvis man inkludere Ben Almans plugin jQuery Hashchange, er man også kørende I Explorer 6 & 7.

Efterfølgende er det egentligt bare at opdatere location.hash, mens man lytter efter ændringer med onhashchange og eksekverer relevant indhold. Med andre ord linker man nu til relevante dele af sin applikation, og tillader brugere at gemme bogmærker.

Hjælp til håndtering af url’er

Selvom det bestem er muligt at håndtere denne url-til-indhold sammenhæng manuelt, så bliver det hurtigt ret tidskrævende. Heldigvis er der en del kode-biblioteker, der kan hjælpe med netop den del. Ben Almans udvidede BBQ Plugin, er et eksempel på, at tage hashchange et skridt videre. Her er der bl.a. tilføjet jQuery.param og jQuery.deparam metoder, der kan hjælpe med at fremsøge og mappe dele af url’en.

Her er yderligere et par eksempler: Simpel og Avanceret.

Der findes også mere omfattende frameworks så som Backbone.js og den lidt lettere Spine.js, der med deres route modul kan sammenholde url med indhold/funktionalitet. Ydermere giver de mulighed for at udnytte history.pushState() I nye browsere, mens der faldes tilbage på location.hash I de ældre – lyder det som en win-win?

Her er et eksempel på routes I Backbone.js:

var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } });

Indeksering af indhold med Google Hashbang #!

Én ting er at få denne AJAX funktionalitet op at køre, noget andet er samtidig at bibeholde sider, der giver mening for søgemaskinerne.

Hvis man har mulighed for den moderne tilgang, hvor der skiftes almindelige url’er med pushState(), skal man bare sikre sig at serveren også kan rendere indhold på basis af den samme url. Det kan meget vel involvere noget differentiering på useragenten.

Men er man ude I at skifte hashfragment, bliver det lidt mere kompliceret, den er nemlig ikke normalt en del af kommunikationen med serveren. Google er heldigvis klar over det og tilbyder løsningen med en såkaldt hashbang notation – #!. Her fortæller man Google at denne ‘ajax-url’ er indeksérbar, og at serveren kan generere et ‘billlede’ af det indhold der modsvarer. Således vil crawleren lave yderligere et request, med hashfragmentet som en parameter.

Med url’en fra tidligere eksempel vil følgende ske:
site.com/search.aspx#!/foo/bar/or/what/ever

Vil resultere I endnu et request, nemlig dette:
site.com/search.aspx?_escaped_fragment_=/foo/bar/or/what/ever

Serveren skal dernæst håndtere det ekstra request og generere relevant indhold.

Og dét er faktisk dét, du har nu hashbang url’er I Googles index, der linker direkte ind I AJAX applikationen.

Brug af redirects

Der må gerne benyttes redirects til at hjælpe med serverdelen, det kan nogle gange gøre tingene nemmere. Så længe crawleren på et eller andet tidspunkt lander på en side med relevant indhold, giver det ingen problemer.

Crawleren sender eksempelvis denne request:
site.com?_escaped_fragment_=/foo/bar

Serveren kunne så redirecte til dette relevante indhold:
site.com/foo/bar

Redirect 301 eller 302?

Hvis man benytter 301 ‘Moved Permanently’ er det target url, der ender I Googles index, og hvis man benytter 302 ‘Moved Temporarily’ vil det være #! url’en.

For det meste ønsker man nok 302’ere, så brugeren havner direkte I AJAX oplevelsen. Men er der fokus på funktionsnedsatte brugere, og/eller afvikling uden Javascript, så kunne det modsatte være tilfældet.

Her er den officielle info på Googles AJAX crawling. Den indeholder også nogle fifs til, at få genereret de nødvendige HTML snapshots.

Vertica har netop lanceret en løsning

Der gør brug af ovenstående teknikker. En dynamisk søgning på e-handels sitet optimera.dk giver mulighed for effektivt at fremsøge og filtrere produkter – uden irriterende sideskift.

Samtidig giver det mulighed for at bogmærke eller sende links til favorit søgninger o.lign. Her er f.eks. søgt på stiksav og filteret indenfor en bestem kategori.

optimera.dk/da-dk/soeg#!/Term=/stiksav/Category=/Save

Javascript Management

Morten Pedersen — Fri, 27 Jan 2012 15:23:00 +0100

I forbindelse med et af de månedlige ANUG meetups, holdte jeg et indlæg om strukturering af klient-kode og bedre udnyttelse af jQuery.

Det er en samling patterns, best practices, tips og tricks – med fokus på struktur, performance og vedligehold. Der er masser af kodeeksempler, der kan kickstarte dit næste projekt - så saks endelig!

Der er også et afsnit om hvordan man får Visual Studio 2010 op I gear, når det kommer til frontend udvikling.

Præsentationen er på engelsk og i form af HTML5 slides. Du finder den her:

Javascript Management & Best Practices
(Du skal benytte Chrome, Safari eller FireFox)

HTML og CSS: To skridt frem og et tilbage, men helt klart den rigtige retning!

Christian Holm Nielsen — Wed, 18 Jan 2012 13:15:00 +0100

Hvad?

En af udfordringerne ved at designe et lækkert website er at HTML og CSS ikke tidligere har haft direkte understøttelse for mange af de ting man forventer af et moderne design. Det gælder alt fra kolonne og strukturerede layouts til skygger og runde hjørner. For at kunne lave avancerede layouts har vi måtte være kreative i forhold til brug af HTML og CSS, hvor meget har været muligt ved at bruge elementer og styling til sit yderste. Den slags ”hacks” kommer med en pris, da det har indvirkning på hvor svært et site er at udbygge, vedligeholde og hvor godt det performer.

Hvorfor?

I forhold til vedligeholdelse har det som udgangspunkt udviklerens og designerens problem, men i sidste ende også kundens. Den tid der går med at få et design til at fungere på tværs af browsere er tid der enten koster i kroner og ører eller er tid der går væk fra at udvikle funktionalitet. Performance omkostningerne har længe været set som bagateller, da det ikke har været mærkbart på en hurtig internetforbindelse. Idag kommer en stadig større del af trafikken fra mobile enheder, og så har det pludselig stor betydning for brugsoplevelsen.

Hvordan?

Meget naturligt er en række af de nye dele af HTML5 og CSS3 derfor møntet på at browserne skal have indbygget understøttelse for at udtrykke de elementer som indgår i et moderne design. Noget af det mest væsentlige, i mine øjne, er at man får mulighed for at definere grids, kolonner og flexboxe – hvor det sidste nok er det mindst åbenlyse at forstå uden uderligere forklaring. Det gennemgående tema er at disse features understøttes delvist, så man er nød til at træffe nogle valg undervejs. Mulighederne falder ofte inden for 3 kategorier. Kan leve med at der vil være forskelle browserne imellem? Vil man bruge et polyfill der simulerer understøttelse i de browsere der ikke har det? Eller vil man være kreativ som man har været hidtil og lave noget som virker men har førnævnte ulemper?

Grid layouts – det vi drømmer om men ikke må få endnu

Et hurtigt kik på caniuse.com afslører at grid layouts desværre ser ud til at have meget lav prioritet hos browser producenterne, da det kun er IE der har nogen kendte planer om at implementere standarden – og det er først i kortene i forhold til IE10. Så selvom standarden definerer et format vil jeg lade det være en øvelse at google mere om emnet :)

Ideen bag grid layouts er at man i CSS kan definere et grid og angive for de forskellige elementer på siden hvor i det grid de skal vises. Det er super fleksibelt og ligger op af den tankegang man bruger andre steder end på web, som f.eks. i Silverlight og WPF applikationer. Det afspejler meget direkte den måde de fleste sites er opbygget op på, så det er en del af HTML5 specifikationen som jeg ser frem til bliver implementeret.

Multi-column layouts

Multiple column layouts er heldigvis en anden historie, da det har meget bred understøttelse selvom det kræver vendor-prefixes. Det er her faktisk kun er IE der halter efter og igen angiver IE10 som første version der vil understøtte det. Vil man benytte multi column layouts er det derfor relevant at spørge sig selv om det er acceptabelt at have IE som en undtagelse, da det i mange tilfælde ikke er kritisk hvis teksten ikke opdeles i kolonner. Hvis det ikke er acceptabelt, så findes der et polyfill, som ved hjælp af javascript tilbyder et fallback der virker i IE. Syntaxen er nem at gå til, så lad os tage et hurtigt illustrativt eksempel.

div.twoColumn
{
    -moz-column-count:2;
    -moz-column-gap:50px;
    -moz-column-rule:1px solid black;
    -webkit-column-count:2;
    -webkit-column-gap:50px;
    -webkit-column-rule:1px solid black;
}

Eksemplet vil dele div-tags op i to kolonner med 50px imellem dem og med en sort lodret streg til at adskille dem. Desværre betyder vendor-prefix at vi er nød til at gentage det for hver browser type.

Som man kan se giver det en god fleksibilitet i forhold til at ændre layout af tekst, og det gør at man nemt kan give en oplevelse i stil med at læse en avis.

Flexboxes

Med flexboxes er historien næsten den samme i forhold til understøttelse som ved multi-column layouts – den primære forskel er at Opera ikke har understøttelse endnu. Der findes polyfills så det er muligt at benytte dem i IE og Opera. Flexie.js har iøvrigt en legeplads hvor man kan prøve hvordan flexboxes fungerer. Deres legeplads er uden tvivl et bedre eksempel end jeg lige kan strikke sammen, så prøv at brug et par minutter til at lege med det.

Som man kan se giver flexboxes mulighed for at styre hvordan et antal bokse opfører sig i forhold til hinanden – hvordan de placeres, hvor store de er og selv hvilken rækkefølge de står i. Til moderne fluent layouts giver flexbokse derfor nogle rigtigt gode muligheder, og de kan bruges til at løse nogle af de samme udfordringer som f.eks et grid layout ville kunne.

Konklusion

Som titlen på denne blogpost afslører, og som eksemplerne viser, så er det desværre sjældent nogen helt glat oplevelse når standarder udvides. Det ender derfor med nye udfordringer i at vælge hvornår man vil med på vognen, og om man synes at to skridt og et tilbage er fremdrift nok til at man vil med. Personligt mener jeg selv at vi har et ansvar for at være med til at trække i den rigtige retning, og lade vores handlinger tale – men det er naturligvis altid en afvejning hvornår man præcis synes at teknologi er modent nok. Heldigvis hjælper mobil-revolutionen os på vej, da nogle fordele bliver mere tydelige, og den høje udskiftningsfremvens der er på telefoner gør det muligt at “aflive” ældre browsere.

Verticas medarbejdere udvikler apps til Windows Phone 7

Tove Keldsen — Mon, 16 Jan 2012 16:24:00 +0100

Verticas medarbejdere har prøvet kræfter med Windows Phone 7 og arbejdet med de nye app-muligheder. Resultatet er fire apps som indeholder alt fra brugervenlige funktioner, hvor du eksempelvis kan omregne ugenumre til hverdagspoesi, som du selv kreerer fra dagspressens artikler.

What week is it?

Q: ”Hvad skal du i uge 34?”
A: ”Hvilken dato er det?”

Lyder det her bekendt?

”What week is it” udregner datoer baseret på ugenumre og lader dig se det nuværende ugenummer på startsiden. Derudover kan du navigere rundt i uger og datoer inde i applikationen. ”God og brugbar”, lyder brugernes dom.

Publiceret af Morten Bock

Hent app'en her

ANUG – Aarhus Net User Group

Se de netrelaterede events i Aarhus med denne Aarhus Net User Group (ANUG) app. Du får mulighed for at se de seneste events, blogposts og få podcast direkte på din telefon samt streame podcastene on the go.

Publiceret af Morten Bock

Hent app'en her

Pressepoesi

Er du også lidt træt af at skrive kedelige tekster hele dagen, og føler du egentlig, at du har mere talent end det, så udlev din indre Søren Kirkegaard med denne poetiske app. Giv Kirkegaards måske lidt for langsomme prosa en overhaling og leg med hverdagspoesi på din telefon. Orderne stammer direkte fra dagspressen, så du er garanteret alternativ kreativitet. Dine intellektuelle værker kan du gemme i dine albums eller dele med venner, der trænger til en digterisk opsang. Skjulte hentydninger i kreativ indpakning er det nye.

Publiceret af Morten Bock

Hent app'en her

Blue Orb Player

Nu har du mulighed for at tilmelde dig alle de podcast-feeds du vil samt streame dem direkte til din telefon med Blue Orb Player. Der er enkelte podscast forhåndsinstalleret, men appen kan fuldstændig tilpasses dine behov.

Publiceret af Christian Holm Nielsen

Hent app'en her

Se video om mulighederne med forretningsapps

Tove Keldsen — Tue, 03 Jan 2012 11:31:00 +0100

I december deltog Vertica på konferencen “Forretningsunderstøttende APPS”, som FYI arrangerede i København. Her blev der sat fokus på apps til at understøtte forretningen. Et område som ikke får så meget opmærksomhed, men hvor der sker rigtig meget, som revolutionerer den måde, vi driver vores virksomheder på.

Som konferencen også viste, kan langt de fleste forretningsområder understøttes med mobilteknologi fra produktion, service og salg til interne funktioner som økonomi og HR.

Her giver Verticas direktør, Jeppe Hansen, deltagerne et overblik over teknologier og trends inden for mobile forretningsapplikationer samt et indblik i, hvordan de dygtigste i markedet har gjort.

Se videoen som også kan hjælpe dig videre på den mobile platform.

24. december: Hør årets hit - You rock Vertica

Julemanden — Sat, 24 Dec 2011 08:20:00 +0100

Fra alle os, til alle jer

Your browser does not support the audio element.

Musik af Jeppe Vammen Kristensen og Jesper Berg

Vertica