Näringslivsprojekt för TE18IM

Företaget “Getillsammans” https://www.getillsammans.se/ erbjuder ett näringslivsuppdrag för två elever som vill vara med och utveckla deras webbtjänst från att bara vara ett planeringsverktyg för barnkalas till att även kunna planera t ex studentfester.
GeTillsammans har nyligen lanserat ett digitalt verktyg för födelsedagsbarn, studenter, osv. Genom sin tjänst kan man skapa en digital inbjudan där man önskar sig en större och bättre present som familj och vänner lägger ihop till.

De vill ha en eller två elever som jobbar hos dem en dag i veckan, på onsdagar.
Det handlar om HTML, JavaScript och CSS. Även UX och UI design. De använder WordPress så det handlar bl a om att göra om mallar/Wordpress-teman.

Kompetensbehov

GeTillsammans är en webbaserad tjänst i huvudsak byggd på ett antal standardkomponenter för att på ett så effektiv sätt som möjligt komma fram till en välfungerande produkt med minimalt antal resurser (1 systemutvecklare).

Detta är nu gjort och GeTillsammans är idag i produktion och har hundratals användare redan. Men resan har bara börjat och det krävs ständigt tillägg och förbättringar och anpassningar till nya tekniker vilket så småningom kräver ett större team. Som ett första steg i det söker vi därför personer med teknisk kompetens (se teknisk beskrivning av systemet nedan) men även med kompetens inom interaktionsdesign och UX. En viktig del av arbetet med GeTillsammans har varit att göra systemet så enkelt att använda som möjligt och detta vill vi fortsätta prioritera. Vi ser därför gärna att det är två personer som kan samarbeta vad gäller design, implementation och testning. De bör vara självgående men kommer förstås få handledning till att lösa detaljerade uppgifter som har tydliga mål.

GeTillsammans-systemet består av många delar varav en del är någorlunda isolerade från resten av systemet och därför kan vara bra kandidater för förbättring/uppdatering. Det finns också behov av några nya funktioner som kräver mer egen research för att lösa om intresse finns för lite mer omfattande uppgifter.

Teknisk beskrivning av systemet GeTillsammans

Exempel på existerande delar i systemet är användarregistrering, skapa/redigera inbjudan, inbjudan, gästlistan, skicka påminnelser (epost/SMS), Swishintegrering, geografisk positionshantering mm.

I botten är systemet GeTillsammans byggt på WordPress som sedan har expanderas med diverse moduler som ibland anpassats.

Eftersom WordPress bygger på HTML, CSS, PHP och Javascript är det också i huvudsak dessa språk som används både i front- och backend.

I grunden är GeTillsammans ett enkelt system med webbaserade formulär för inmatningar och olika typer av vyer för att presentera data. Vi använder till största delen verktygen Toolset och Gravity Forms för detta. Att förbättra funktioner är ofta en kombination av att använda wordpress-baserade verktyg, design av utseende och UX samt funktionalitet som behöver programmeras. Logiken i den programmering som finns är förhållandevis enkel och svårigheten ligger snarare i att hantera blandningen av de olika programmeringsspråken.

Vi arbetar idag alltid med en produktionssajt och en utveckling/stagingsajt där vi testar alla ändringar först.

Om du är intresserad av att vara med och jobba med detta projekt på onsdagar så anmäler du ditt intresse till Niclas via e-post.

Innovationsutmaning: Konstruera skydd mot översvämningar

Innovationsutmaning (TE18DP och TE18IM):
Komma på tekniska konstruktionslösningar som lösningar på problemen med översvämningarna i Halland och Blekinge.

Varför ska vi göra det?
De akuta översvämningarna ger upphov till stora materiella och ekonomiska skador och även säkerhetsrisker för miljön, människor och djur som bor i dessa områden.

Vad ska vi göra och hur?
Målsättningen är att komma på flera fungerande tekniska konstruktionslösningar som kan förhindra eller minska skadorna vid framtida översvämningar i Halland och Blekinge. Vi ska arbeta med en innovationsprocess där vi utgår från autentiska case och user stories.

Sätta oss in i problemet genom att titta på problembeskrivningen.
Skaffa mer information om problemet och tänkbara lösningar genom att göra research.
Formulera fokusfrågor.
Göra en riskanalys och prioriteringslista.
Ta fram många tänkbara förslag på lösningar genom en kreativ idégenerering.
Utvärdera och välja ut de bästa förslagen.
Utveckla och konkretisera de bästa förslagen.
Presentera de konkretiserade förslagen.

Problembeskrivning

Några av våra åar svämmar över vissa år. Varje gång det sker ger översvämningarna upphov till stora materiella skador på fastigheter, vägar och miljön, men även säkerhetsrisker för människor och djur som bor och vistas på platser runt dessa vattendrag. Det sker inte varje år så det har varit svårt att planera förebyggande insatser eller göra permanenta preventiva lösningar. När det sker översvämningar så är folket och samhället inte förberedda, så de flesta hinner inte skydda sina ägor innan översvämningarna och skadorna är ett faktum. Klimatförändringarna bidrar till allt fler extrema väder vilket ökar risken för att detta ska hända oftare i framtiden. Flera av de akuta åtgärder som sätts in idag är inte effektiva och bidrar ibland till icke gynnsamma bieffekter. Det är därför angeläget att hitta nya bättre lösningar för att bättre klara av utmaningarna i framtiden.

Research och diskussionsfrågor

Skaffa mer information om problemet och tänkbara lösningar genom att göra research. Använd gärna diskussionsfrågorna nedan som utgångspunkt för din research. Läs igenom tidningsartiklarna nedan.

Varför sker översvämningarna?
Hur ofta sker det?
Hur mycket vatten handlar det om?
Vad är det som händer vid översvämningarna?
Vilka skador kan uppstå på egendom, natur, samhället och individer?
Vilka är de drabbade?
Hur brukar liknande utmaningar lösas?
Hur har man gjort tidigare?
Hur gör man idag?
Hur löser man det på andra platser, i andra länder?
Vilka aktörer är inblandade för att lösa problemen?
Vems ansvar är det att skydda egendom?
Vems ansvar är det att förebygga så att översvämningarna inte sker?
Vem är det som ska betala för skadorna?
Vem är det som ska investera i lösningarna?

Bakgrundsmaterial, tidningsartiklar och korta filmade nyhetsinslag om de aktuella översvämningarna

Vattnet kryper närmare husen

SMHI varnar för höga vattenflöden i flera län

Räddningstjänsten i Halmstad begär nationell förstärkning

Hydrologen om vattennivåerna: ”Kommer fortsätta stiga i Lagan”

Christers djur hotas av extrema vattennivån: ”Hönsen har fått simma”

De bygger skyddsvallar för att rädda företaget

Susanne i Knäred hade en meter vatten i källaren

Se översvämningarna i Knäred från luften

Avloppsvatten pumpas ut i Lagan – reningsverk överbelastat

Risken för ras och skred ökar – var uppmärksam när vattnet sjunker undan

När det varit höga flöden och vattnet sedan börjar sjunka undan ökar risken för ras och skred. Jord, grus, sten och sand kan komma i rörelse.

När en översvämning pågår tränger vatten in i jorden i det översvämmade området. Grundvattennivån blir förhöjd och vattentrycket ökar i jordens porer (höjt portryck). När portrycket höjs försämras jordens hållfasthet.

När vattnet sedan sjunker undan, sjunker inte den förhöjda grundvattenytan av i samma takt. Särskilt långsamt sjunker grundvattenytan undan i täta, finkorniga jordar som lera och silt. Siltjord har så små korn att man inte kan urskilda dem med ögat.

Om dessutom en tung vall har lagts ut för att förhindra översvämningens utbredning, tillkommer även vallens vikt som en pådrivande faktor.

Vilka tecken på jordskred kan jag hålla utkik efter?

Färska erosionsskador i slänter mot vattendrag.

Plötsliga sprickor och sättningar i marken.

Brott på ledningar och kablar i marken.

Träd och stolpar som börjar luta.

Fokusfrågor

Hur kan vi minimera skadorna från översvämningarna när de väl sker?
Hur kan vi begränsa översvämningarna på de mest känsliga platserna (t ex vid viktiga vägar, broar, hus, byggnader)?
Hur kan vi med hjälp av digitalisering och modern teknik som t ex IoT, internetuppkopplade sensorer, webbtjänster och appar skapa lösningar för att hjälpa oss att hantera, reagera på, styra och förhindra översvämningarna?

Riskanalys

Vad kan hända vid dessa översvämningar?
Vilka skador kan uppstå på egendom, natur, samhället och individer?
Vilka är de mest prioriterade riskerna?

Ta fram förslag på lösningar

Ta fram många förslag på tänkbara lösningar på hur man skulle kunna lösa utmaningarna i fokusfrågorna ovan.
Använd en kreativ idégenereringsprocess och brainstorming i första steget.

Jobba enskilt tyst och skriv upp så många förslag du kommer på.
Jobba i grupper (samma grupper som i Fashiontech-projektet).
Utse en i gruppen som sammanställer allas idéer i en gemensam lista som alla får ta del av.
Bygg vidare på varandras idéer. Kom på ännu fler idéer, kanske nya kombinationer av flera förslag. Här är även elever från TE18IM som läser Dator- och Nätverksteknik, Ciscos IoT-kurs, Webbutveckling och Programmering med i projektgrupperna för att få in förslag på digitala lösningar.
Utvärdera era idéer. Vilka är akuta lösningar? Vilka är förebyggande proaktiva lösningar? Vilka idéer är mest realistiska och genomförbara? Vilka idéer tror ni har bäst effekt på att lösa problemen? Vilka anser ni borde prioriteras?
Välj ut de tre bästa idéerna/förslagen som ni i gruppen vill bygga vidare på, utveckla och konkretisera. Låt alla i gruppen vara med och rösta på alla förslagen (topp 3).
Presentera och beskriv era tre bästa förslag för de andra projektgrupperna.

Utveckla och konkretisera ert bästa förslag

Konkretisera ert bästa förslag från igår gällande lösningar mot översvämningarna.

Jobba tillsammans i projektgruppen
Dela upp ansvarsområden så att alla i gruppen får en uppgift och arbetar.
Ni ska konstruera er lösning. Hur ska den se ut? Var ska den installeras? Hur ska den byggas? Vilka material och delar ska den bestå av? Vilka krafter kommer den utsättas för och vad krävs för att den ska hålla och fungera?
Ta fram en prototyp eller modell. Skapa en skiss eller 3D-modell på hur den ska se ut. Bygg en fysisk modell eller prototyp. Använd material vi har i Makerspace för att konstruera och bygga er modell.

Implementering

Presentation av idéerna, förslagen och modellerna för Region Halland, MSB, Räddningstjänsten, företag och de kommuner som är mest berörda. Eventuellt en artikel om arbetet och förslagen i media.
Hur vill ni presentera era idéer?

Bilder från fältstudie längs Lagan vid Knäred att använda till era presentationer.

Satellitbilder från Google Maps ->>

Robotar som ger människor jobb

De senaste åren har det skrivits mycket om att robotar tar människors jobb. Allt fler arbetsuppgifter ersätts av robotar, och fler står på tur i takt med att robotarna snabbt blir bättre och mer avancerade.

I robotiseringens och automatiseringens kölvatten skapas dock mängder av nya arbetstillfällen, främst inom teknikyrken som programmering, AI och mekatronik.

Här är dock ett intressant filmklipp från Japan som visar hur ett café erbjuder människor med funktionsnedsättningar arbetstillfällen som robotservitörer. Robotarna i caféet fjärrstyrs helt enkelt av människor som kan sitta eller ligga hemma och styra dem och interagera med caféets besökare. Mänsklig social interaktion och social integrering möjliggörs tack vara robotarna.

Robotar som ger människor jobb

Uppgifter och diskussionsfrågor

Vad tycker du om det du såg på filmen? Hur känner du inför en utveckling där allt fler mänskligt fjärrstyrda robotar interagerar med oss i offentliga miljöer som t ex caféer eller butiker?
Ge exempel på negativa saker med mänskligt fjärrstyrda robotar som interagerar med oss i offentliga miljöer.
Ge exempel på positiva saker med mänskligt fjärrstyrda robotar som interagerar med oss i offentliga miljöer.
Tycker du att denna typ av arbetsuppgift enbart ska utföras av människor med olika typer av funktionsnedsättningar? Eller bör det vara som vilken typ av jobb som helst att alla får konkurrera om jobben på lika villkor?
Skulle du hellre vilja bli serverad av en mänskligt fjärrstyrd servitörsrobot eller en autonom robot som styrs automatiskt av artificiell intelligens eller utifrån förprogrammerade instruktioner?
Hur tycker du att en servitörsrobot ska se ut? Ska den likna roboten i filmen? Ska den likna en människa mer? Tycker du att den ska se helt annorlunda ut och kanske vara mer anpassad för att hämta och lämna brickor eller tallrikar och glas? Beskriv, skissa och sök gärna efter inspiration på Internet.
Vilka egenskaper behöver en bra servitörsrobot ha? Vad ska den kunna göra? Beskriv funktionerna och hur den rent mekaniskt ska vara uppbyggd. Vilka funktioner behöver programmeras? Vilka funktioner behöver fjärrstyras? Hur kan man lösa de olika funktionerna rent tekniskt?
Skulle du kunna tänka dig att jobba med denna typ av teknologi själv? Hur då i så fall? Som den som styr roboten, som den som programmerar den eller som den som konstruerar och designar den här typen av robotar?

IT-standarder inom skolväsendet

Ett stort problem inom skolans värld är att olika IT-system inte fungerar tillsammans eller att en massa information behöver läggas in flera gånger i olika system eftersom de inte automatiskt kan dela information mellan sig.
Det beror oftast på att det saknas smarta och enhetliga sätt att definiera den information som systemen ska hantera eller hur kommunikationen mellan olika system ska ske.
För att lösa sådana problem brukar man ta fram och sedan hålla sig till standarder.
Nu har Sverige äntligen fått igång ett arbete som syftar till att definiera vilka IT-standarder som är av relevans för skolan.

Tillsammans med Skolverket, SIS, flera huvudmän och i samband med ett Vinnova-finansierat projekt om standarder för datadrivna processer, har Swedish Edtech Industry påbörjat ett arbete att ta fram en lista över de standarder och rekommendationer som finns och som är aktuella för att skapa ett säkert, effektivt, kvalitativt digitalt ekosystem för det svenska skolväsendet.
En kort sammanfattande information om detta arbete och vad standarder innebär kan läsas nedan. Men för mer information och för löpande aktuell information om arbetet rekommenderas läsning direkt från ursprungskällan på Edtechkartan.se.
Edtechkartan.se som lanserades hösten 2018 är en systemkarta över det svenska edtech-landskapet med inriktning på skolväsendet. Det är en interaktiv och lättanvänd digital systemkarta som löpande kommer att hållas uppdaterad. Kartan tar utgångspunkt i skolans och skolhuvudmannens verksamhetsprocesser och utifrån dessa verksamhetsområden mappas leverantörer in som idag har lösningar för att stödja processen. Det har hittills inte funnits en mer detaljerad bild över det komplexa digitala ekosystemet som utbildningssektorn utgör.

Interoperabilitet och it-standarder

Alla dessa standarder

Kravställ för interoperabilitet, kravställ standarder! En enkel uppmaning, men inte lika enkel att genomföra. Begreppet standard tolkas på olika sätt och det är viktigt att peka på vad vi menar och vad skillnaderna är. Det finns nationella och internationella standarder, det finns rekommendationer som i princip anses vara standarder men med olika “dialekter”(där rekommendationerna tolkas och används på olika sätt). Vi är alla överens om behovet av att etablera standarder, göra dem vedertagna för ett kvalitetssäkrat digitalt ekosystem, för ett ett säkert och effektivt informationsflöde, för interoperabilitet. Men om standarder inte beställs, så testas och implementeras de inte. Man ska också vara medveten om att standarder blir gamla och det finns risk för cementering av it-miljöerna. Alltså behöver vi alla hela tiden vara uppmärksamma, föra dialog och tillsammans se till att de standarder som finns är aktuella.

Det är också viktigt att inte blanda ihop vad som är en standard och vad som är en faktisk lösning. En standard beskriver och definierar. En lösning levererar (och det finns således alltid en leverantör bakom).

I december 2019 etablerades ett nationellt forum för arbetet med standarder: Forum för informationsstandardisering i skolväsendet. Ett forum Skolverket ansvarar för, i samverkan med olika aktörer, däribland Swedish Edtech Industry.

Vad är egentligen en “standard”?

En teknisk standard är en specifikation av ett format som tas fram, förvaltas och tillhandahålls av en standardiseringsorganisation, men en standard kan också vara en överenskommen definition av ett begrepp eller ord (klass, grupp o.s.v.). Standarder utvecklas vanligen genom frivilliga överenskommelser. Ett givet format kan vara erkänt av fler än en organisation och det finns format som inte erkänts av någon standardiseringsorganisation.

SIS, Svenska institutet för standarder, definierar begreppet standard så här:

En standard är en smart gemensam lösning på ett återkommande problem. Syftet med standarder är att skapa enhetliga och transparenta rutiner som vi kan enas kring.

Standarder kopplat till lärande, kommer ofta i paket med olika delar och är mer eller mindre heltäckande. Det finns olika organisationer som arbetar med olika former av “standardpaket”:

– ISO, International organization för standardization. Levererar internationella standarder, där delar kan användas och andra anpassas enligt lokala (nationella) behov inom specifika områden.

– SIS, Svenska institutet för standarder. Arbetar i tekniska kommittéer där standarder tas fram kopplat till olika områden, varav TK450 är en kommitté med fokus på standarder för it och lärande. I TK450 ingår flera olika arbetsgrupper där en arbetsgrupp t.ex. tagit fram SS12000, en annan EMIL (Education Information Markup Language). Speglar det internationella arbetet i ISO och gör nationella anpassningar.

– IMS Global Learning Consortium – levererar olika rekommendationer som sedan tolkas och anpassas. Ibland brukar man säga att IMS rekommendationer har olika “dialekter”. Ett exempel är IMS LTI (Learning Tools Interoperability), en “standard” (rekommendation) för anslutning av externa webbaserade lärresurser och innehåll till andra plattformar.

Stöd i arbetet: en lista med standarder

Tillsammans med Skolverket, SIS, flera huvudmän och i samband med ett Vinnovafinasierat projekt om standarder för datadrivna processer, har vi påbörjat en lista över de standarder och rekommendationer samt några relevanta informationsflöden som finns och som är aktuella för att skapa ett säkert, effektivt, kvalitativt digitalt ekosystem.

Denna listning har vi inom ramen för det här projektet gått igenom och mappat gentemot de olika områden och processer som finns definierade i edtechkartan. Vi har också gjort en ansats till att visa vilka standarder som aktuella respektive inaktuella, eftersom det är viktigt att inte fastna i äldre teknik eller i standarder som i sin tur kan bli cementerande.

I nedan länkat kalkylark finns listningen + områden & processer + definitioner och lite annat smått och gott som vi hoppas är till nytta i arbetet med kravställningar. Dokumentet ska ses som ett arbetsdokument, öppet för alla att kommentera i, så gör gärna det. Tillsammans kan vi göra det mer komplett och hålla det uppdaterat.

Länk till dokumentet: It-standarder skola, informationsflöden, områden och processer

Bygg mobilappar med JavaScript och React Native

React Native låter dig bygga mobilappar med bara JavaScript. Den använder samma design som React, så att du kan komponera ett riktigt mobilt användargränssnitt från deklarativa komponenter.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

En React Native-app är en riktig mobilapp

Med React Native bygger du inte en ”mobil webbapp”, en ”HTML5-app” eller en ”hybrid-app”. Du bygger en riktig mobilapp som inte kan skiljas från en app byggd med Objekt-C eller Java. React Native använder samma grundläggande UI-byggstenar som vanliga iOS- och Android-appar. Du sätter bara ihop de byggstenarna med JavaScript och React.

import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image
          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
          style={{width: 320, height:180}}
        />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

Slösa inte tid med att kompilera om

Med React Native kan du bygga din app snabbare. Istället för att kompilera om kan du ladda om din app direkt. Med Hot Reloading kan du till och med köra ny kod medan du behåller ditt applikationsläge.

Använd ”native code” när du behöver

React Native kombineras smidigt med komponenter skrivna i Objekt-C, Java eller Swift. Det är enkelt att lägga in direkt körbar kod (anpassad för det specifika operativsystemet och hårdvaran) om du behöver optimera några aspekter av din applikation. Det är också lätt att bygga en del av din app i React Native och en annan del av din app med direkt körbar kod – det är så Facebook-appen fungerar.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';

class SomethingFast extends Component {
  render() {
    return (
      <View>
        <TheGreatestComponentInTheWorld />
        <Text>
          TheGreatestComponentInTheWorld could use native Objective-C,
          Java, or Swift - the product development process is the same.
        </Text>
      </View>
    );
  }
}

Läs mer och kom igång på https://react-native.org/ eller https://github.com/facebook/react-native
Online-kurser: http://www.reactnative.com/courses/

Ett tips är att använda Expo som utvecklingsmiljö.
Det är det snabbaste sättet att bygga en riktigt bra app med tillgång till enhetens funktioner som kamera, plats, aviseringar, sensorer, haptik och mycket mer, allt med universella API: er.
Här är en lista på tutorials och exempelkod för olika appar med React Native och Expo från Expos blog:

A list of the examples and tutorials published on the Expo blog (last updated January 09, 2019).

Thanks to our talented and prolific developer community, we’ve been able to highlight a bunch of great examples and tutorials on our Expo blog. Here’s a running collection, grouped by type.

Examples (with code)

Tutorials

Sections:

Project & development process
Function-specific
Learn by re-creating
General

Project & development process

Function-specific

Learn by re-creating

General

Building a React Native App using Expo and Typescript (Part 1 / Part 2)
Building a code editor with Monaco
13 recipes from building four React Native apps with Expo, including:
◦ Geolocation nearby search in React Native
◦ Uploading assets directly from React Native to Firebase Storage
◦ “I just need a button”, handling common user interactions
◦ Straightforward Animated
◦ Using your own custom vector icons
◦ Analytics, crashlytics and ads
◦ Do your self a favor, aggregate third-party packages
◦ Coloring Lottie animations
◦ Geolocation permissions, the cross-platform way
◦ Smooth animations with setNativeProps where appropriate
◦ RTL layouts without I18nManager
◦ Fixing strange paddings in view layouts
◦ infoPlist your permissions (your app will be rejected otherwise)

CSS Grid för responsiv webbdesign

Omfattande genomgång av CSS Grid och dess olika egenskaper för att skapa responsiv webbdesign med HTML och CSS Grid. Lär dig rutnätlayout, specifika rutnätegenskaper och den nya
måttenheten CSS Grid-fraktion!

CSS Grid Tutorial | Responsive Crash Course (43:42)

I denna tutorial för webbutveckling 2019 får du se det du behöver veta om CSS Grid på bara 20 minuter. Du lär dig vad Grid är, hur Grid fungerar och de grundläggande egenskaperna du behöver för att utforma dina Grid-containrar. Grid är ett fantastiskt layoutläge inbyggt i CSS, och är väldigt lätt att förstå. Du får även se hur du använder CSS Grid med CSS Flexbox och till och med animerar rutnätet.
Koden i denna video hittar du här: https://github.com/codeSTACKr/css-gri…

Learn CSS Grid in 20 Minutes – (2019) (27:40)

CSS Grid gör det lättare att skapa webbplatslayouter. Det förenklar både din HTML och CSS och ger dig mer kontroll över din layout. Du kan köra den interaktiva versionen av denna CSS grid tutorial här: https://scrimba.com/g/gR8PTE

Kursen innehåller tre avsnitt. De två första kommer att lära dig de nyckelbegrepp du behöver veta för att komma igång. Tillsammans bygger vi både en webbplatslayout och ett supercoolt bildrutnät. I bonusavsnittet lär du dig att skapa artikellayouter med CSS Grid plus några mer avancerade koncept.

CSS Grid Course (1:02:43)

CSS Grid Layout is the most powerful layout system available in CSS. In this video, we will cover the basics of CSS Grid including some basic terminology and some easy syntax to get you up and running with Grid in your project today.

Designa adaptiva intelligenta användargränssnitt

Vad händer om du kan förutsäga användarnas beteende med smarta användargränssnitt? Med sannolikhetsstyrda statecharts, beslutsträd (decision trees), förstärkt inlärning (reinforcement learning) och mer, kan UI:s (User Interfaces) utvecklas på ett sådant sätt att de automatiskt anpassar sig till användarens beteende.

I filmklippet nedan kommer du få se hur du kan skapa anpassningsbara och intelligenta användargränssnitt som lär sig hur individuella användare använder dina appar och anpassar gränssnittet och funktionerna just för dem i realtid.

Mind Reading with Intelligent & Adaptive UIs (23:11)

Wikipedia crash course

Här är en crash course i att använda Wikipedia för att söka, hitta och navigera rätt bland digital information på webben.
Wikipedia är en källa som ofta nedvärderas av lärare och twittertroll som en opålitlig källa. Och ja, det finns ibland stora fel och utelämnanden, men Wikipedia är också Internets största allmänna referensverk och som sådant ett otroligt kraftfullt verktyg.
I följande filmklipp får du tips på hur du kan använda Wikipedia för ett gott syfte – för att hjälpa dig att få ett fågelperspektiv över ett visst innehåll, bättre kunna utvärdera information med lateral läsning och hitta pålitliga primära källor.

Using Wikipedia: Crash Course Navigating Digital Information #5 (14:15)

Vad är lateral läsning?

Lateral läsning är en lässtrategi som lämpar sig betydligt bättre för informationssökning på webben än traditionell vertikal läsning som man gör i tryckta böcker eller papperstidningar där man läser varje sida uppifrån och ner. Det handlar istället om att hoppa horisontellt mellan olika webbläsarflikar och läsa om en viss sak på flera olika sidor för att snabbt få en överblick från flera olika perspektiv.
Risken med att läsa vertikalt på enskilda webbsidor och bara leta efter tecken på om källan verkar seriös och trovärdig på den aktuella webbsidan kan sammanfattas i följande citat: ”Reading that way gives misinformation and disinformation more power. It allows people to hijack your consciousness, and it also makes you part of the problem.”

Check Yourself with Lateral Reading: Crash Course Navigating Digital Information #3 (13:51)

Mer information om lateral läsning kan du läsa i forskningsrapporten Lateral Reading: Reading Less and Learning More When Evaluating Digital Information från Wineburg, Sam and mcgrew, sarah, (October 6, 2017). Stanford History Education Group Working Paper No. 2017-A1 . Available at SSRN: https://ssrn.com/abstract=3048994 or http://dx.doi.org/10.2139/ssrn.3048994

Machine Learning för webben

Med TensorFlow.js kan du snabbt och enkelt skapa webbapplikationer som använder Artificiell Intelligens (AI) och Machine Learning (ML) med ett fåtal rader JavaScript-kod.
Det finns en hel del färdigbyggda och förtränade ML-modeller med JavaScript API:er som du kan använda direkt för tillämpningar som t ex:
Image Classification
Image Segmentation
Object Detection
Pose Detection
Speech Commands
Text Classifications
Augmented Reality
Gesture-based interaction
Speech recognition
Accessible web apps
Sentiment analysis, abuse detection
Conversational AI
Web page optimization
m.m.

Machine Learning magic for your web application with TensorFlow.js (Chrome Dev Summit 2019) 8:30

Learn more: TensorFlow.js → https://goo.gle/2XLhMe0 Tensorflow.js Github → https://goo.gle/2DcgLCe #ChromeDevSummit All Sessions → https://goo.gle/CDS19

SJ satsar på VR och AR

SJ har sedan något år tillbaka en uttalad målsättning att bli ett av Sveriges mest digitaliserade bolag. Det låter kanske en smula klyschigt och är egentligen ganska ointressant.
Det som däremot är väldigt intressant och spännande är att se att SJ, till skillnad från väldigt många andra, faktiskt gör konkreta och vettiga digitaliseringssatsningar som skapar reellt värde, faktisk kundnytta samt leder till betydande besparingar och påtagliga effektiviseringar av verksamheten.

Några exempel:
Idag sker 97 % av SJ:s biljettförsäljning digitalt där kunderna bokar själva online. För bara 5 år sedan var den siffran 50 %.
50 % av alla bokningar sker via smartphones.
60 % av alla betalningar sker idag via Swish, som bara funnits som betalningsalternativ sedan 2017.
Alla ombokningar av resenärer vid inställda tåg eller kraftiga förseningar sker idag helt automatiskt och digitalt, vilket krävde väldigt mycket tid och resurser tidigare pga manuellt arbete av personal som oftast var underbemannade när det verkligen hände.

SJ använder sig av Design Thinking och låter sina kunder/resenärer vara delaktiga vid utvecklingen och utvärderingen av nya mobila tjänster som t ex VägvisARen som är en AR-guide för att hitta rätt på stationen m.m (se nedan).

VR i utbildningen av de anställda.

SJ utbildar sin personal med hjälp av virtuell verklighet (VR). — SJ utbildar sina anställda mha virtuell verklighet VR. Foto: Andreas Lundberg SJ/TT

SJ använder nu VR i utbildningen av sin personal eftersom de ser att det både ökar utbildningskvaliteten och effektiviserar utbildningsverksamheten, jämfört mot de traditionella lärarledda utbildningarna.
Denna digitala transformation inom SJ, och det förändrade användarbeteendet hos resenärerna mot att använda och föredra de digitala mobila tjänsterna, har gått väldigt snabbt.

Över 2 500 lokförare och tågvärdar hos SJ ska före årets slut ha utbildats med hjälp av virtuell verklighet (VR). En fördel är att kunna träna på farliga moment, till exempel övningar som rör starkström.

VR-satsningen ingår i ett stort digitaliseringsprogram inom SJ. I september inleddes utbildningen som medger att personalen kan träna om och om igen och inte behöver resa till en viss ort för att skola sig.

Nu finns VR på 14 av SJ:s stationeringsorter. Utbildningarna är inspirerade av dataspelsvärlden och handkontroller används. De har även börjat testa eye tracking-teknik för att styra delar av upplevelsen med ögonen. När till exempel en dörr stängs på det virtuella tåget går det lite trögt precis som i verkligheten. Det karaktäristiska pyset när dörren öppnas ingår också.

– Den stora fördelen är att vi inte blir lika beroende av att använda fysiska tåg i utbildningen, säger affärsutvecklare Aron Wahlberg på SJ till TT.

Genom att kunna simulera säkerhetsprocesser och öva på olika scenarier på de flesta av SJ:s fordonstyper, hoppas den statliga tågoperatören nå ökad punktlighet, säkerhet och service.

Personalen VR-tränas i stressiga och svåra situationer som brand, dålig sikt och plötsliga distraktioner precis vid avgång. Ett annat exempel är hanteringen av rullstolslift som kräver elva olika steg och handgrepp.

– Reaktionerna har över lag varit väldigt positiva och personalen kommer med nya idéer om hur VR kan utnyttjas i utbildningen, säger Aron Wahlberg.

Demo av VR-utbildning i hantering av rullstolslift

Virtual Reality på nya X 2000

Utvecklingen av nya X 2000 har lämnat skisstadiet och nu börjar testandet av olika funktioner.
Premiärturen för det första nya X 2000 kommer att ske i slutet av 2019/början av 2020. Under år 2021 ska samtliga X 2000 ha fått ny inredning, nya stolar, ny bistro, nya digitala skärmar och nya tekniska system. För att testpersonerna ska kunna uppleva det nya tåget redan nu satsar de på VR.

– Vi vill använda nya, spännande lösningar när vi utvecklar nya tjänster och produkter, säger Anna Fahlkrans, affärsutvecklare på SJ. Utvecklingen av nya X 2000 är en miljardsatsning och det är viktigt att kunder och personal på ett tidigt stadium kan ge synpunkter på det vi utvecklar. Senare i år kommer också all ny teknisk utrustning att testas. Därefter kommer designen av den nya bistrovagnen samt nya digitala skärmar.

Den som redan nu vill se hur de nya tågen kommer att se ut kan ta en titt på VR-filmen nedan. Filmen, som har tagits fram av Rayvr och SJ Labs, tar dig med genom 2 klass, via bistron och vidare till 1 klass.

VägvisARen gör ditt resande lättare

Skärmbild på VägvisARen — Test av funktionen VägvisARen i SJ-appen

Med hjälp av VägvisARen kan användaren hitta rätt på tågstationer genom att följa instruktioner som visas på skärmen samtidigt som kameran visar omgivningen. Den använder Augmented Reality, eller AR-teknik, för att guida dig på t ex Stockholm Central till pendeltåget eller till ditt nästa tåg. Från och med april 2018 kan man testa VägvisARen i appen SJ Labs på Stockholms Centralstation och från juni på sträckorna Stockholm C – Stockholms södra / Flemingsberg, Stockholms södra – Stockholm C samt Flemingsberg – Stockholm C.