tech day 2015 - fokus på fokus

49
Fokus på fokus Robin Helly, .NET-utvecklare

Upload: valtech-ab

Post on 26-Jul-2015

416 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: Tech Day 2015 - Fokus på fokus

Fokus på fokusRobin Helly, .NET-utvecklare

Page 2: Tech Day 2015 - Fokus på fokus
Page 3: Tech Day 2015 - Fokus på fokus
Page 4: Tech Day 2015 - Fokus på fokus
Page 5: Tech Day 2015 - Fokus på fokus
Page 6: Tech Day 2015 - Fokus på fokus

Fokus på fokusVarför blev det så krångligt att beställa en fotobok?

Robin Helly, .NET-utvecklare

Page 7: Tech Day 2015 - Fokus på fokus

Ordbok

• Egenskap

• Format

Page 8: Tech Day 2015 - Fokus på fokus

Varför behövs ett bildredigeringsverktyg?

• Responsiva webbar

• Högupplöst vs normal upplösning

• Samma bild i olika sammanhang

Page 9: Tech Day 2015 - Fokus på fokus
Page 10: Tech Day 2015 - Fokus på fokus
Page 11: Tech Day 2015 - Fokus på fokus
Page 12: Tech Day 2015 - Fokus på fokus
Page 13: Tech Day 2015 - Fokus på fokus

Vad vore ett bra sätt att hantera bilder på?

• Det ska finnas en bra överblick över tillgängliga bilder

• Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

• Inget större kunskapskrav för att kunna hantera systemet

• All bildredigering ska bara behövas göras en gång och gälla överallt

• Det ska finnas stöd för responsivitet

• Det ska gå snabbt och vara enkelt

Page 14: Tech Day 2015 - Fokus på fokus

Verktyget

• Listning

• Öppning av bild

• Redigering av bild

Page 15: Tech Day 2015 - Fokus på fokus

Demo

Page 16: Tech Day 2015 - Fokus på fokus
Page 17: Tech Day 2015 - Fokus på fokus

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Page 18: Tech Day 2015 - Fokus på fokus

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Page 19: Tech Day 2015 - Fokus på fokus

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Page 20: Tech Day 2015 - Fokus på fokus

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Page 21: Tech Day 2015 - Fokus på fokus
Page 22: Tech Day 2015 - Fokus på fokus

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Page 23: Tech Day 2015 - Fokus på fokus

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Page 24: Tech Day 2015 - Fokus på fokus

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Page 25: Tech Day 2015 - Fokus på fokus

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Page 26: Tech Day 2015 - Fokus på fokus

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Page 27: Tech Day 2015 - Fokus på fokus

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Page 28: Tech Day 2015 - Fokus på fokus

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Page 29: Tech Day 2015 - Fokus på fokus

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Page 30: Tech Day 2015 - Fokus på fokus

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Page 31: Tech Day 2015 - Fokus på fokus

Hämta bilden med formaten

var populateQuery = new MediaItemPopulationQuery

{

MediaFormats = systemFormats.ToList(),

PublishIdentifier = _client.PublishIdentifier

};

Page 32: Tech Day 2015 - Fokus på fokus

Hämta bilden med formaten

var populateQuery = new MediaItemPopulationQuery

{

MediaFormats = systemFormats.ToList(),

PublishIdentifier = _client.PublishIdentifier

};

Page 33: Tech Day 2015 - Fokus på fokus

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Page 34: Tech Day 2015 - Fokus på fokus

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Page 35: Tech Day 2015 - Fokus på fokus

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Page 36: Tech Day 2015 - Fokus på fokus
Page 37: Tech Day 2015 - Fokus på fokus

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Page 38: Tech Day 2015 - Fokus på fokus

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Page 39: Tech Day 2015 - Fokus på fokus

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Page 40: Tech Day 2015 - Fokus på fokus

Uppdatera formaten

var cropEffect = new CropEffect { Height = height, Width = width, X = x, Y = y };

foreach (var format in editorFormats) {

var resizeEffect = new ResizeEffect {

Height = format.Height,

Width = format.Width,

ResizeMode = ResizeMode.ScaleToFill

};

var systemFormat = new ImageFormat();

systemFormat.Effects.Add(cropEffect);

systemFormat.Effects.Add(resizeEffect);

_imageFormatService.UpdateSystemFormatFor(systemFormat, editorFormat, id);

}

Page 41: Tech Day 2015 - Fokus på fokus

Uppdatera formaten

var cropEffect = new CropEffect {

Height = height,

Width = width,

X = x,

Y = y };

Page 42: Tech Day 2015 - Fokus på fokus

Uppdatera formaten

foreach (var format in editorFormats) {

var resizeEffect = new ResizeEffect {

Height = format.Height,

Width = format.Width,

ResizeMode = ResizeMode.ScaleToFill

};

...

}

Page 43: Tech Day 2015 - Fokus på fokus

Uppdatera formaten

foreach (var format in editorFormats) {

...

var systemFormat = new ImageFormat();

systemFormat.Effects.Add(cropEffect);

systemFormat.Effects.Add(resizeEffect);

...

}

Page 44: Tech Day 2015 - Fokus på fokus

Uppdatera formaten

foreach (var format in editorFormats) {

...

_imageFormatService.UpdateSystemFormatFor(

systemFormat,

editorFormat,

id);

}

Page 45: Tech Day 2015 - Fokus på fokus

Varför underlättar verktyget?

• Det ska finnas en bra överblick över tillgängliga bilder

• Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

• Inget större kunskapskrav för att kunna hantera systemet

• All bildredigering ska bara behövas göras en gång och gälla överallt

• Det ska finnas stöd för responsivitet

• Det ska gå snabbt och vara enkelt

Page 46: Tech Day 2015 - Fokus på fokus

Varför underlättar verktyget?

Det ska finnas en bra överblick över tillgängliga bilder

Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

Inget större kunskapskrav för att kunna hantera systemet

All bildredigering ska bara behövas göras en gång och gälla överallt

Det ska finnas stöd för responsivitet

Det ska gå snabbt och vara enkelt

Page 47: Tech Day 2015 - Fokus på fokus
Page 48: Tech Day 2015 - Fokus på fokus
Page 49: Tech Day 2015 - Fokus på fokus

Tack!

Robin Helly [email protected]