Automated layout for magazine and newspaper publishing 06.02.2013 - - PowerPoint PPT Presentation

▶
automated layout for magazine and newspaper publishing
SMART_READER_LITE
LIVE PREVIEW

Automated layout for magazine and newspaper publishing 06.02.2013 - - PowerPoint PPT Presentation

Dec 03, 2022 41 likes •302 views

Automated layout for magazine and newspaper publishing 06.02.2013 Mikko Kuhna Aalto University mikko.kuhna@aalto.fi School of Science http://mikkokuhna.com Dept. Media Technology Partners Aalto ARTS, Aalto BIZ, Aalto Communications, Alma

slide-1
SLIDE 1

Automated layout for magazine and newspaper publishing

06.02.2013 Mikko Kuhna mikko.kuhna@aalto.fi http://mikkokuhna.com Aalto University School of Science

  • Dept. Media Technology
slide-2
SLIDE 2

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Partners

2

Aalto ARTS, Aalto BIZ, Aalto Communications, Alma 360, Alma Media, Anygraaf, Arena Partners, I-Mediat, Kauppalehti, Metropolia, Sanoma Magazines Finland, STT-Lehtikuva, TUT, VTT Aalto collaboration

Pirkko Oittinen, Ida-Maria Kivelä, Sami Pekkala, Rami Aamulehto, Raisa Halonen, Mari-Laine Hernandez, Petri Leskinen, Jukka Koskenranta, Juho Hiilivirta, Nanna Särkkä, Harri Heikkilä, Maija Töyry, Merja Helle, Sarri Kukkonen, Heikki Nuutinen, Paula Haikarainen, Eveliina Olsson, Matias Kivikangas, Simo Järvelä, Niklas Ravaja

slide-3
SLIDE 3

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Outline

3

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

slide-4
SLIDE 4

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Crossmedia 2010

4

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

slide-5
SLIDE 5

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Color palette

5

bit.ly/LQq6jG 2010 Visual concepts and algorithms

slide-6
SLIDE 6

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Importance map

6

bit.ly/LQq6jG 2010 Visual concepts and algorithms

slide-7
SLIDE 7

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Crossmedia 2011

7

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

slide-8
SLIDE 8

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Color palette

8

bit.ly/Krgb3V 2011 Usability of digital magazines

slide-9
SLIDE 9

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Importance map

9

Importance map Article cover page, landscape 1024 x 768 px Article cover page, portrait 768 x 1024 px Contents page 400 x 200 px Navigation bar 100 x 100 px bit.ly/Krgb3V 2011 Usability of digital magazines

slide-10
SLIDE 10

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

HTML5 & native app

(Baker Framework)

10

Master’s Thesis

IDA-MARIA KIVELÄ

bit.ly/RU7Wze Ida-Maria Kivelä (2012): Aesthetic measures for automated magazine layout on tablet devices

Master’s Thesis

IDA-MARIA KIVELÄ

bit.ly/QXnSfS Sami Pekkala (2012): Usability evaluation of design solutions for tablet magazines bit.ly/Krgb3V 2011 Usability of digital magazines http://bit.ly/Sni04k Kuhna, M., Kivelä, I. & Oittinen, P. Semi-Automated Magazine Layout Using Content-based Image

  • Features. ACM Multimedia ’12.

U Clarity U Usability V Layout R Pagination U Navigation U Interaction R Previews R Readability V Mag. likeness U Use logic V Contents page V Overall picture V Browsability V Sections R Image gallery R Columns U Nav. bar V Visual cues V Image quality V Traditionality Other

Manual Responsive

9 % 0 % 9 % 12 % 0 % 12 % 15 % 0 % 15 %

Automatic

slide-11
SLIDE 11

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

11

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

slide-12
SLIDE 12

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

12

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

Headline SecondHead Label Lead Article

Content model

slide-13
SLIDE 13

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Content model

13

14:45 - 15:45 Room 22 Content model for magazine and newspaper publishing and dynamic visualization of structural data, Mikko Kuhna, Aalto SCI

slide-14
SLIDE 14

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

14

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

Headline SecondHead Label Lead Article

Content model

slide-15
SLIDE 15

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

15

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

Headline SecondHead Label Lead Article

Content model automated processing

slide-16
SLIDE 16

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Automated processing

16

Magazine App

Launch images

Static resources Issue material Ruby script

Processed images

(JPEG)

Metadata

(XML)

Articles

(XML)

Video

(MP4, WEBM, OGG)

Audio

(M4A, MP3, WAV, OGG)

Stylesheet templates (LESS) Document templates (HAML) Stylesheets

(CSS3)

Images

(PNG, SVG)

Scripts

(JS)

Metadata

(JSON)

App icons UI images

Magazine

(HTML5) Fonts

(TTF/OTF, SVG, WOFF, EOT)

slide-17
SLIDE 17

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Automated processing

17

App Store A V A I L A B L E N O W !

slide-18
SLIDE 18

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

18

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app ??? web app

Headline SecondHead Label Lead Article

Content model automated processing

slide-19
SLIDE 19

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2012

19

Content-based image features

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

BAKER native app STAGE web app

Headline SecondHead Label Lead Article

Content model automated processing

slide-20
SLIDE 20

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Stage Framework

20

swipe gesture and kinetic scrolling in a web app with CSS3 3D transforms supports HTML5 video, audio and canvas animations and the rest of the specification uses dynamic application cache to improve performance when the browser supports it

slide-21
SLIDE 21

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Stage Framework

21

A V A I L A B L E S O O N !

MIT license

slide-22
SLIDE 22

NEXT MEDIA - A TIVIT PROGRAMME

Master’s Thesis

RAMI ALATALO

06.02.2013

Stage Framework

22

A V A I L A B L E S O O N !

MIT license Rami Aamulehto (2013): Digital magazine and newspaper publishing with HTML5

iMac (OS X 10.8.2), Safari iMac (Windows 7), IE 10 iMac (Windows 7), Opera iMac (Windows 7), Chrome MacBook Air, Safari iMac (OS X 10.8.2), Chrome iMac (OS X 10.8.2), Maxthon iMac (Windows 7), Maxthon iMac (Windows 7), Firefox iMac (OS X 10.8.2), Opera iMac (OS X 10.8.2), Firefox MacBook Air, Maxthon MacBook Air, Chrome MacBook Air, Firefox MacBook Air, Opera iPhone 5 (6.0) iPhone 5 (6.1) iPhone 5 (6.0.2) iPad 2 (6.0.1) iPad 2 (6.1) iPad 3 (6.1) iPad Mini (6.1) iPad 3 (6.0.1) iPad Mini (6.0.1) iPhone 4S (6.0.1) Windows Phone 8X (8) Galaxy S III (4.0.4) iPad 3 (5.1.1) Galaxy Tab 10.1 (4.0.4), Chrome iPhone 4S (5.1.1) One S (4.0.3) Xperia T (4.0.4) Xoom (4.0.4) Galaxy Tab 10.1 (4.0.4), Dolphin Galaxy Tab 10.1 (4.0.4), Firefox Galaxy Tab 10.1 (4.0.4), Android Browser Galaxy Tab 10.1 (4.0.4), Opera Mobile iPhone 4 (6.0.1) One X (4.0.3) C8812 (4.0.3) One V (4.0.3) Galaxy Tab (2.3.6) 200 400 600 800 787 727 626 597 578 560 545 534 533 525 481 473 468 467 377 351 349 340 287 283 283 282 280 276 157 152 149 73 73 69 67 56 48 44 43 43 42 42 35 30 30 27

CSS3 3D Transform Performance ms (lower is better)

slide-23
SLIDE 23

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

Aalto University Magazine Demo & Stage Framework

23

DEMO 10:15 - 10:45 Break 12:00 - 13:15 Lunch 14:15 - 14:45 Break Mikko Kuhna & Rami Aamulehto, Aalto SCI

slide-24
SLIDE 24

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2013

24

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

slide-25
SLIDE 25

NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013

eReading 2013

Newspaper publishing

25

Magazine App

(e.g. Baker or web app)

Authoring tool

Content model

(XML)

Processed images

(JPEG, PNG)

Images

(JPEG, PNG)

Image feature algorithms

Stylesheet template (LESS) Document template (HAML) Document

(HTML5)

Stylesheet

(CSS3) Idea Developed Tested

Media experience Task 2. Media experience and adoption Activity 1. Different layout alternatives and MX Activity 3. Dynamic approaches for mobile news clients

slide-26
SLIDE 26

mikko.kuhna@aalto.fi http://mikkokuhna.com

10:15 - 10:45 Break 12:00 - 13:15 Lunch 14:15 - 14:45 Break Aalto University Magazine Demo and Stage Framework, Mikko Kuhna & Rami Alatalo, Aalto SCI 14:45 - 15:45 Room 22 Content model for magazine and newspaper publishing and dynamic visualization of structural data, Mikko Kuhna, Aalto SCI