Kategoriarkiv: html5

Devday 2016

Vi har haft vår årliga Devday, en dag i kunskapens tecken där syftet är att testa nya tekniker under ett paraply av vägledande och smått märkliga teman. Filosofin bakom Devday är att praktisera den pågående interna kunskapsspridningen, exempelvis i form av teknikkvällar, genom att erbjuda en dag för att förverkliga idéer och skapa lagkänsla. Då vi alla är kodfantaster är det ytterligare en bonus att kunna ha lite friare tyglar kring vilka tekniker man kan använda i utvecklandet. Årets övergripande tema var ”MasterDev” där varje lag med givna grundrecept, ett skafferi fyllt av ramverk och sin egen personliga kryddning fick en dag på sig att implementera något ur kategorierna:

– Intranet of things
– Adventures in the shell
– George Booles matkasse-webappar

Lagen tävlade mot varandra i två priskategorier: folkets val-priset, samt teknikpriset. Det sistnämnda gick till laget som plockade flest poäng från en lista med bonusobjektiv, där det fanns allt från dokumentation till unit-tester och användandet av specifika ramverk.

Så vad kunde våra lag koka ihop under en dag?

– En konsolbaserat tinder som använder SharePoints user profile service och visar ASCII art av dina potentiella matchningar. Högerpil för like!

– Recept-appar i varierande utformning som gav menyförslag baserat på valda kategorier och/eller sökord, förslag till restauranger som serverar maten, en ingredienslista om man föredrar att laga den själv, samt passande middagsmusik.

– En flic-integration som triggar text-to-speech över ett Sonos-system.

devday_1

devday_2

devday_3

devday_4

Publishing Visio drawings as SVG

svg-004

In my post yesterday I showed how to publish Visio files as html image maps. That was one of the alternatives. Today I’ll present how to use SVG to achieve the same goal: publish Visio diagrams in SharePoint without having the Enterprise license. There are some alternatives:

  1. Show Visio diagrams as pdf files on SharePoint Pages
  2. Embed Visio diagrams as html image maps – Read more in my previous blog post
  3. Embed Visio diagrams as svg pictures – This blog post.
  4. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

SVG

SVG stands for scalable vector graphic, it is a xml-based format for defining images. It is supported in all modern browsers. Because SVG can be part of a page markup, it can be easily embedded into SharePoint.

Visio

In Visio you can save a drawing as SVG. Thanks to my smart colleague: Dan Saeden. So the process of exporting and embedding a drawing is almost the same as for an image map. An improvement is that you don’t have to update the html markup and you don’t need to upload or base64-encode any pictures. It’s all in the markup (DOM). See some screenshots below.

Advantages and Disanvantages

Compared to image maps and other methods, we get following advantages:

  1. It is scalable (not pixelish) – you can show it in a small screen, and a big screen.
  2. Only markup is needed (xml), no need for uploading images
  3. No additional bandwidth is required for downloading images to the browser
  4. No need for updating html structure, easier to explain how to do it.

There are also some disanvantages:

  1. Complex SVG files increase the DOM complexity and it may affect the performance in browser
  2. No support for older browsers: In IE8 it won’t work

svg-000

How to

Use your drawing of choice:

svg-001

Save it as an SVG file:

svg-002

Add a Script Editor Web Part to a page and paste the content of the svg file (open it in a text editor):

svg-003

That’s it:

svg-005

Summary

Visio files can be exported to many different formats. SVG is a great modern html standard for graphics that acts as a part of the DOM. It still requires a manual process of exporting and putting it on a SharePoint page, but it is a good way to make it modern, fast and even responsive (with some additional css). Editors don’t need to adjust the markup, only copy it.