Flislegg websiden din

  • Article

Med Windows 10 lanserte vi den 29 Juli i år en helt ny nettleser, Microsoft Edge (heretter: Edge) som blir standardnettleseren i Windows 10. Internet Explorer vil fremdeles eksistere, og kunne kjøre side-om-side med Edge for kompatibilitet med eldre nettsteder. Nettleseren er bygget ikke bare for å bryte rekken med forskjellige dokumentmoduser, men også for å kunne tilby én nettleseropplevelse på tvers av alle enheter som vi kommer ut på.

Om du har sett Windows 8 eller 8.1 så har du neppe unngått å legge merke til våre aktive “Live Tiles” (fliser), som kort fortalt er programsnarveier som kan vise deg innhold selv om programmet ikke kjører.

For deg som bygger websites, er det hyggelig å høre at du også kan få ditt nettsted til å ikke bare ha sin egne flis, men du kan også gjennom enkle grep, gjøre den like levende som en “native” windows app. For å feste en snarvei til et nettsted fra Microsoft Edge gjør du følgende:

  • Besøk nettstedet som du ønsker å pinne fast til startmenyen din, for eksempel <leap.microsoft.no> med Edge nettleseren
  • Klikk på de tre prikkene øverst på høyre side
  • Velg “Pin to Start” (eller dertil egnet norsk oversettelse)

image

 

Nå kan du klikke på din startmeny, og finne flisen for denne nettsiden

image

 

Start med en klassisk flis

Å legge inn støtte for slike fliser er så enkelt som å legge til noen meta-tags i HEADER seksjonen av websiden din. Fyll inn følgende verdier:

Code Snippet

  1. <meta name="application-name" content="LEAP2016" />
  2. <meta name="msapplication-TileColor" content="#ffffff" />
  3. <meta name="msapplication-square70x70logo" content="tiny.png" />
  4. <meta name="msapplication-square150x150logo" content="square.png" />
  5. <meta name="msapplication-wide310x150logo" content="wide.png" />
  6. <meta name="msapplication-square310x310logo" content="large.png" />

Størrelsene på flisene er gitt fra windows, navnene på de er selvforklarende.  Du har nå lagt inn støtte for fliser på nettstedet ditt. Da er neste steg å gjøre de levende!

Bitteliten digresjon: Om du ikke liker å ha for mange meta-tags i header på webstedet ditt kan du enkelt bare referere til en xml fil der alle disse innstillingene er gjort en gang for alle:

Code Snippet

  1. <meta name="msapplication-config" content="/browserconfig.xml">

Da slipper du unna med en enkelt metatag, noe som er ryddig og pent! Innholdet i referert XML kan f.eks. se slik ut:

Code Snippet

  1. <!--?xml version="1.0" encoding="utf-8"?-->
  2. <browserconfig>
  3.   <msapplication>
  4.     <tile>
  5.       <square70x70logo src="tiny.png">
  6.         <square150x150logo src="square.png">
  7.           <wide310x150logo src="wide.png">
  8.             <square310x310logo src="large.jpg">
  9.               <tilecolor>#83382b</tilecolor>
  10.             </square310x310logo>
  11.           </wide310x150logo>
  12.         </square150x150logo>
  13.       </square70x70logo>
  14.     </tile>
  15.     <notification>
  16.       <polling-uri src="://notifications.buildmypinnedsite.com/?feed=leap.microsoft.no/newsfeed/">
  17.         <frequency>360</frequency>
  18.         <cycle>1</cycle>
  19.       </polling-uri>
  20.     </notification>
  21.   </msapplication>
  22. </browserconfig>

 

Gjør flisen levende med RSS

Ikke overraskende, så trenger du en ekstra instruks for å forsyne flisene dine med levende innhold (eng. notifications):

Code Snippet

  1. <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/1.xml; polling-uri2=notifications/2.xml; polling-uri3=notifications/3.xml" />

 

Du kan angi flere kilder til innhold i samme tag. Du kan OGSÅ sende ut nyheter vha JavaScript, da disse flisene er små nettlesere så lenge startmenyen er aktiv. Når en site blir pinnet til start, så kan din notification url lytte etter event mssitepinned med eksempelvis følgende kode:

Code Snippet

  1. document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);
  2.  
  3.   function StartPeriodicUpdateBatch(){  
  4.       var arrURI = ["notifications/1.xml", "notifications/2.xml", "notifications/3.xml"];
  5.       window.external.msEnableTileNotificationQueue(true);
  6.       window.external.msStartPeriodicTileUpdateBatch(arrURI);
  7.   }

 

Jaha, men hva slags form skal denne feeden ha da?

Innhold til tiles følger en XML mal som kan tilpasses de ulike størrelsene på fliser som du har valgt å ta med. I eksemplet under har jeg tilpasset innhold i 3 ulike størrelser for fliser, og hva som vises i de:

Code Snippet

  1. <tile>
  2.   <visual lang="en-US" version="2">
  3.     
  4.     <!-- For fliser p 150 x 150 -->
  5.     <binding template="TileSquare150x150PeekImageAndText04" branding="name">
  6.       <image id="1" src="leap.microsoft.no/newsfeeed/firstImage.png" />
  7.       <text id="1">First image</text>
  8.     </binding>
  9.     
  10.     <!-- For 310 x 150 -->
  11.     <binding template="TileWide310x150ImageAndText01" branding="name">
  12.       <image id="1" src="leap.microsoft.no/newsfeeed/firstImage.png" />
  13.       <text id="1">First image</text>
  14.     </binding>
  15.  
  16.     <!-- For 310 x 310  -->
  17.     <binding template="TileSquare310x310SmallImagesAndTextList01" branding="name">
  18.       <image id="1" src="leap.microsoft.no/newsfeeed/firstImage.jpg"/>
  19.       <image id="2" src="leap.microsoft.no/newsfeeed/secondImage.jpg"/>
  20.       <image id="3" src="leap.microsoft.no/newsfeeed/thirdImage.jpg"/>
  21.       <text id="1">Title Text 1</text>
  22.       <text id="2">Body Text 1.1</text>
  23.       <text id="3">Body Text 1.2</text>
  24.       <text id="4">Title Text 2</text>
  25.       <text id="5">Body Text 2.1</text>
  26.       <text id="6">Body Text 2.2</text>
  27.       <text id="7">Title Text 3</text>
  28.       <text id="8">Body Text 3.1</text>
  29.       <text id="9">Body Text 3.2</text>
  30.     </binding>
  31.   </visual>
  32. </tile>

Malene som det refereres til finner du her .

Det kan være ulike årsaker til at man ikke får produsert innhold på denne formen direkte, for eksempel at nyhetsfeed genereres i et annet kontor av bedriften. Vi har derfor gjort dette enkelt gjennom at dere kan trekke en helt vanlig RSS feed gjennom nettstedet  <buildmypinnedsite.com> (som vist i XML kodeeksemplet). Denne vil ta en normal RSS feed som input, og gjøre innholdet om til tiles som er klare til bruk.

Code Snippet

  1. <polling-uri src="://notifications.buildmypinnedsite.com/?feed=leap.microsoft.no/newsfeed/">

Her kjøres en normal RSS newsfeed gjennom buildmypinnedsite.com for å produsere innhold til live tiles, slik at vi slipper. Du får også hjelp til å bygge live tiles på nettstedet. Vi anbefaler at du prøver!

Lær mer

Om du ønsker å utvide kunnskapen om Live Tiles, spillutvikling på web, og generelt lære mer om html5, så har vi en fantastisk ressurs ved navn Microsoft Virtual Academy der du kan finne et hav av relevante kurs. Klikk her for å se en komplett liste over alle HTML5,CSS3 og JavaScript kurs som vi tilbyr

Lenker

Build a live tile – artikkel fra MSDN arkivet vårt

Hvordan bygge opp tile XML

Maler for visning i en live-tile 

Microsoft Virtual Academy

 

Mvh,

 

Pedro