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 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 2 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Outline Document Content model Document template (HAML) (XML) (HTML5) Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Idea Developed 3 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Crossmedia 2010 Document Content model Document template (HAML) (XML) (HTML5) Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 4 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Color palette 2010 Visual concepts and algorithms bit.ly/LQq6jG 5 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Importance map 2010 Visual concepts and algorithms bit.ly/LQq6jG 6 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Crossmedia 2011 Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 7 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Color palette 2011 Usability of digital magazines bit.ly/Krgb3V 8 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Importance map 2011 Usability of digital magazines bit.ly/Krgb3V Importance map Article cover page, landscape 1024 x 768 px Article cover page, portrait Contents page 768 x 1024 px 400 x 200 px Navigation bar 100 x 100 px 9 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
HTML5 & native app 2011 Usability of digital magazines (Baker Framework) bit.ly/Krgb3V Ida-Maria Kivelä (2012): Aesthetic measures for automated Master’s Thesis magazine layout on tablet devices bit.ly/RU7Wze IDA-MARIA KIVELÄ Sami Pekkala (2012): Usability evaluation of design Master’s Thesis solutions for tablet magazines bit.ly/QXnSfS IDA-MARIA KIVELÄ Kuhna, M., Kivelä, I. & Oittinen, P. Semi-Automated Magazine Layout Manual Automatic Responsive U Clarity Using Content-based Image U Usability V Layout R Pagination Features. ACM Multimedia ’12. U Navigation U Interaction R Previews R Readability http://bit.ly/Sni04k 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 9 % 0 % 9 % 12 % 0 % 12 % 15 % 0 % 15 % 10 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 11 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Headline SecondHead Content Article Label model Lead Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 12 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Content model 14:45 - 15:45 Room 22 Content model for magazine and newspaper publishing and dynamic visualization of structural data , Mikko Kuhna, Aalto SCI 13 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Headline SecondHead Content Article Label model Lead Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 14 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Headline SecondHead Content automated Article Label model processing Lead Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 15 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Automated processing UI images Fonts Launch images (TTF/OTF, SVG, WOFF, EOT) App icons Images (PNG, SVG) Stylesheet Magazine App templates (LESS) Static Stylesheets resources (CSS3) Document Metadata templates (HAML) (JSON) Scripts (JS) Magazine Ruby script (HTML5) Processed images (JPEG) Metadata (XML) Issue Video material (MP4, WEBM, OGG) Articles (XML) Audio (M4A, MP3, WAV, OGG) 16 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Automated processing A V A I L A B L E N O W ! App Store 17 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Headline SecondHead Content automated Article Label model processing Lead Document Content model Document template (HAML) (XML) (HTML5) ??? web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 18 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2012 Headline SecondHead Content automated Article Label model processing Lead Document Content model Document template (HAML) (XML) (HTML5) STAGE web app Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) BAKER native app Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Content-based image features Idea Developed 19 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Stage Framework 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 20 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Stage Framework A V A I L A B L E S O O N ! MIT license 21 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Stage Framework A V A I L A B L E S O O N ! iMac (OS X 10.8.2), Safari 27 CSS3 3D Transform Performance iMac (Windows 7), IE 10 30 iMac (Windows 7), Opera 30 ms (lower is better) iMac (Windows 7), Chrome 35 MacBook Air, Safari 42 iMac (OS X 10.8.2), Chrome 42 iMac (OS X 10.8.2), Maxthon 43 iMac (Windows 7), Maxthon 43 MIT license iMac (Windows 7), Firefox 44 iMac (OS X 10.8.2), Opera 48 iMac (OS X 10.8.2), Firefox 56 MacBook Air, Maxthon 67 MacBook Air, Chrome 69 MacBook Air, Firefox 73 MacBook Air, Opera 73 iPhone 5 (6.0) 149 iPhone 5 (6.1) 152 Rami Aamulehto (2013): iPhone 5 (6.0.2) 157 iPad 2 (6.0.1) 276 Digital magazine and Master’s Thesis iPad 2 (6.1) 280 newspaper publishing iPad 3 (6.1) 282 iPad Mini (6.1) 283 with HTML5 iPad 3 (6.0.1) 283 RAMI ALATALO iPad Mini (6.0.1) 287 iPhone 4S (6.0.1) 340 Windows Phone 8X (8) 349 Galaxy S III (4.0.4) 351 iPad 3 (5.1.1) 377 Galaxy Tab 10.1 (4.0.4), Chrome 467 iPhone 4S (5.1.1) 468 One S (4.0.3) 473 Xperia T (4.0.4) 481 Xoom (4.0.4) 525 Galaxy Tab 10.1 (4.0.4), Dolphin 533 Galaxy Tab 10.1 (4.0.4), Firefox 534 Galaxy Tab 10.1 (4.0.4), Android Browser 545 Galaxy Tab 10.1 (4.0.4), Opera Mobile 560 iPhone 4 (6.0.1) 578 One X (4.0.3) 597 C8812 (4.0.3) 626 One V (4.0.3) 727 Galaxy Tab (2.3.6) 787 0 200 400 600 800 22 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Aalto University Magazine Demo & Stage Framework DEMO 10:15 - 10:45 Break 12:00 - 13:15 Lunch 14:15 - 14:45 Break Mikko Kuhna & Rami Aamulehto, Aalto SCI 23 NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
eReading 2013 Document Content model Document template (HAML) (XML) (HTML5) Stylesheet Stylesheet Magazine App Authoring tool template (LESS) (CSS3) (e.g. Baker or web app) Image feature Images Processed images algorithms (JPEG, PNG) (JPEG, PNG) Idea Developed 24 Tested NEXT MEDIA - A TIVIT PROGRAMME 06.02.2013
Recommend
More recommend
