SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
Georg Heeg eK                  Georg Heeg eK
Baroper Str. 337                Wallstraße 22
44227 Dortmund                  06366 Köthen
Germany                             Germany
Tel: +49-231-97599-0    Tel: +49-3496-214 328
Fax: +49-231-97599-20   Fax: +49-3496-214 712




                                Georg Heeg AG
                                 Seestraße 131
                                    8027 Zürich
                                    Switzerland
Email: georg@heeg.de                      1
                         Tel: +41(848) 43 34 24
http://www.heeg.de
From Print Design to Web Design

  "Using Smalltalk to Connect both Worlds"


        Georg Heeg eK 2009
          http://www.heeg.de


       Author: Roland Wagener
           roland@heeg.de
                                             2
From Print Design to Web Design

   1.   What's the Problem?
   2.   So, lets build a bridge!
   3.   Now, lets build a product!
   4.   It currently looks like this




                                       3
What's the Problem?

   Designers are artists with
        a special language
      They are thinking in
    colors, fonts and perfect images
    colors
    Asthetics and good taste
     are key to their success
      look at the results:
– Brochures, Flyers, Posters, Magazines


                                       4
We love to look at Them!

But we look at paper, if we adore those
 results ... Most of the time
On the web, we find those gems ransformed
 into PDF documents or Flash booklets

      So why is it that we don't look at
          some beautiful normal
          HTML-based web pages?




                                           5
What Tools do they use?
Photoshop, Illustrator, Freehand
Pagemaker, Quark-Express, InDesign
  – They are all mainly targeting at print
    oriented output
  – None of them can export a web page
    • Ok, Photoshop can export an album site,
      but that's something different ...




                                                6
ADOBE supports you ...




                         7
Designing for the Web?


               PDF


                   Flash


                HTML
                           8
Designing for the Web II

designers export graphic versions of
 their documents to web programmers

The images are decomposed and
 arranged on a web page

The results differ from the original



                                       9
Designing for the Web III

HTML and its limitations are exposed to the
 user and influence the design a lot
  –   Can't use all fonts
  –   Shouldn't use all colors
  –   Images squeezed and compressed
  –   Positioning can be fun ...
  –   Learn CSS and you will win


 A nightmare for a professional designer



                                         10
So what options do they have?
InDesign© exports into two web compatible formats:
              PDF and Flash
   – The whole layout is preserved
   – It is a one-click operation
   – no tuning of the result necessary

      But end users are not always fond of
                  PDF and Flash




                                               11
PDF/Flash versus HTML
PDF or Flash                   HTML
  – Proprietary file format      – The web file format
  – Needs a browser plug-        – All browsers support it
    in                                • They are optimized for
     • Plug-ins consume                 this
       additional plattform
       performance
  – Large files, all pages       – Each page is separate
    are fetched in one go             • Shorter load times per
     • Long download times              page
  – May include fonts not        – Simple to interface
    available on the clients       with other web sites
    computer                       and web applications
  – Flash cannot embedd          – Flash and other media
    flash                          can be embedded

                                                           12
So, lets build a bridge!
Objectives:
   – designer can stay with the tools he knows well
   – No need to learn HTML or CSS
   – export of designer documents to HTML format




Like this!




                                                      13
How did VisualWorks help us?
Based on exports of InDesign CS4
  – We used the XML frameworks, and build domain objects
    for each InDesign-page
  – various image operations are done using an external
    library to create PNG files
  – With seaBreeze providing a complete HTML object
    model, we were able to build a seaBreeze page for each
    InDesign page
• The first prototype was shown to a customer
  after about two weeks




                                                        14
Image processing I

We started using InkScape,
 an SVG based vector graphics application
  – Called from the command line
  – Available on all platforms (Win, Mac, Linux)
  – InkScape converts SVG into PNG files
  – http://www.inkscape.org/




                                               15
Image processing II

This approach was very expensive
  – Starting up InkScape 100 to 1000 times for a
    conversion took too long
  – The command line call did not allow us to
    re-use a running InkScape
And InkScape 0.46 created wrong images in
 certain complex transparency situations




                                                   16
Image Processing III

An alternative was Batik, a Java SVG toolkit
  – We used JNIPort by Chris Uppall and
    Joachim Geidel to call it from VisualWorks
  – The performance improved dramatically
      • Java starts up just once,
      • subsequent calls are just very fast
  – Also available on all platforms
  – http://xmlgraphics.apache.org/batik/




                                                 17
To have or Not to have

A designer uses Fonts to attract attention
Fonts are key to his work
HTML does not allow to make use of fonts
  reliably
  – If a font is missing on the client machine, the
    text will be displayed a default one, like
    Times, Courier or Helvetica
How can we help?




                                                  18
Display of Text

export text as vector paths
  – This way, the font is used on the designers
    computer
  – The client doesn't know about the font at all
However, text exported this way will
 become a PNG image in the web
  – we are able to attach the original text to the
    page, but it is not the same
  – The user has the choice here:
    • Content or Design


                                                 19
The Prototype

A web application written in seaBreeze
Our idea was to deploy the converter as a
  web based service
  – Pay-per-conversion
  – Pay-per-converted page
  – Pay-per project
But users wanted a 'real' application, or
 even an InDesign Plug-In




                                            20
Now, lets build a product
From an engineering point of view
  'We are finished, we can do it!'


From a customer point of view, the solution of the
  converter as a web service was not acceptable!
   – No platform integration
   – No integration into InDesign
   – No internationalization


A standalone MacOSX application is the next goal
   – Designers love the Mac
   – And the simpicity of usage


                                                21
And so, we are in the process of

Preparing a MacOSX application
  –   Interface to the Application Menu
  –   Support the platform help system
  –   Support drag&drop of files
  –   Open the browser on the resulting HTML
      pages
  –   Inventing icons and herald screens
  –   Writing marketing material
  –   Find a pricing model
  –   ...


                                               22
Interface to the Mac-Menu
Use the InterfaceBuilder
  and modify the original
  MainMenu.nib inside the
  visual.app/Contents/Resources
  folder, and put
  translated versions into
  the language project
  folders
Use unique MenuItem-IDs
  but do not change the
  existing ones!




                                    23
Two facets of Internationalization

The Mac has one for
  Resources
  – Apple-Help is
    organized this way
And VisualWorks has
  another one for
  MessageCatalogs
   – UIs based on
     UserMessages can use
     them, the interface to
     the location inside
     the .app-folder is via
     manual modifications



                                        24
It currently looks like this




                               25
We are still not finished

But we have high hopes!
The preparation of the product took longer
  than the solution of the problem
And the name will be:




                                        26
Designing for the Web!


               PDF


                   Flash


                 HTML
                           27

Contenu connexe

En vedette

Martín Valdivia: Mini novelas y promoción del microahorro en el perú
Martín Valdivia: Mini novelas y promoción del microahorro en el perúMartín Valdivia: Mini novelas y promoción del microahorro en el perú
Martín Valdivia: Mini novelas y promoción del microahorro en el perúUNDP Policy Centre
 
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!zipatri Patricia Perelli de Morel
 
La Red de Acuerdos Comerciales
La Red de Acuerdos ComercialesLa Red de Acuerdos Comerciales
La Red de Acuerdos ComercialesCADEXCO
 
Distance Learning for Health: Tana Wuliji
Distance Learning for Health: Tana WulijiDistance Learning for Health: Tana Wuliji
Distance Learning for Health: Tana WulijiLIDC
 
Retos de la comunicación para la incidencia
Retos de la comunicación para la incidenciaRetos de la comunicación para la incidencia
Retos de la comunicación para la incidenciaSocialTIC
 
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...Naturefund
 
Sustainable Bioenergy Solutions For Tomorrow
Sustainable Bioenergy Solutions For TomorrowSustainable Bioenergy Solutions For Tomorrow
Sustainable Bioenergy Solutions For TomorrowCLEEN_Ltd
 
Newsletter Proferro III
Newsletter Proferro IIINewsletter Proferro III
Newsletter Proferro IIIPicanol Group
 
HARTEK POWER - SOLAR PROFILE
HARTEK POWER - SOLAR PROFILE HARTEK POWER - SOLAR PROFILE
HARTEK POWER - SOLAR PROFILE HARTEK POWER
 
Kundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacher
Kundenerziehung - TYPO3camp Munich 2011 - Patrick LobacherKundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacher
Kundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacherdie.agilen GmbH
 
Making Student Thinking Visible v3.6
 Making Student Thinking Visible v3.6 Making Student Thinking Visible v3.6
Making Student Thinking Visible v3.6Darren Kuropatwa
 
Exposición de histología 2016
Exposición de histología 2016Exposición de histología 2016
Exposición de histología 2016Giuliana Tinoco
 

En vedette (19)

Martín Valdivia: Mini novelas y promoción del microahorro en el perú
Martín Valdivia: Mini novelas y promoción del microahorro en el perúMartín Valdivia: Mini novelas y promoción del microahorro en el perú
Martín Valdivia: Mini novelas y promoción del microahorro en el perú
 
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!
Virgen De Medjugorje.Ppt Sia Lodato Gesú Cristo, Oggi E Sempre!
 
La Red de Acuerdos Comerciales
La Red de Acuerdos ComercialesLa Red de Acuerdos Comerciales
La Red de Acuerdos Comerciales
 
Manual de java basico
Manual de java basicoManual de java basico
Manual de java basico
 
Distance Learning for Health: Tana Wuliji
Distance Learning for Health: Tana WulijiDistance Learning for Health: Tana Wuliji
Distance Learning for Health: Tana Wuliji
 
Metabuscador. La Biblioteca Virtual del Sistema Sanitario Publico de Andalucia
Metabuscador. La Biblioteca Virtual del Sistema Sanitario Publico de AndaluciaMetabuscador. La Biblioteca Virtual del Sistema Sanitario Publico de Andalucia
Metabuscador. La Biblioteca Virtual del Sistema Sanitario Publico de Andalucia
 
Retos de la comunicación para la incidencia
Retos de la comunicación para la incidenciaRetos de la comunicación para la incidencia
Retos de la comunicación para la incidencia
 
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...
AGROFORESTERÍA DINÁMICA EN LOS VALLES INTERANDINOS DE BOLIVIA – SUPERANDO MIE...
 
Sustainable Bioenergy Solutions For Tomorrow
Sustainable Bioenergy Solutions For TomorrowSustainable Bioenergy Solutions For Tomorrow
Sustainable Bioenergy Solutions For Tomorrow
 
Newsletter Proferro III
Newsletter Proferro IIINewsletter Proferro III
Newsletter Proferro III
 
HARTEK POWER - SOLAR PROFILE
HARTEK POWER - SOLAR PROFILE HARTEK POWER - SOLAR PROFILE
HARTEK POWER - SOLAR PROFILE
 
TayagGeraldResume
TayagGeraldResumeTayagGeraldResume
TayagGeraldResume
 
Kundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacher
Kundenerziehung - TYPO3camp Munich 2011 - Patrick LobacherKundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacher
Kundenerziehung - TYPO3camp Munich 2011 - Patrick Lobacher
 
Making Student Thinking Visible v3.6
 Making Student Thinking Visible v3.6 Making Student Thinking Visible v3.6
Making Student Thinking Visible v3.6
 
Boletin
BoletinBoletin
Boletin
 
Exposición de histología 2016
Exposición de histología 2016Exposición de histología 2016
Exposición de histología 2016
 
Hidro energía
Hidro energíaHidro energía
Hidro energía
 
Mejor el estudio en ingles
Mejor el estudio en inglesMejor el estudio en ingles
Mejor el estudio en ingles
 
Iluminar un led
Iluminar un ledIluminar un led
Iluminar un led
 

Similaire à From Print Design to Web Design

Website development tool
Website development toolWebsite development tool
Website development toolJins Joseph Seo
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowMichael Kowalski
 
Hey open source, don’t forget the user! - by Chad Kieffer
Hey open source,  don’t forget the user! - by Chad KiefferHey open source,  don’t forget the user! - by Chad Kieffer
Hey open source, don’t forget the user! - by Chad Kiefferdmthompson
 
DocDoku: Using web technologies in a desktop application. OW2con'15, November...
DocDoku: Using web technologies in a desktop application. OW2con'15, November...DocDoku: Using web technologies in a desktop application. OW2con'15, November...
DocDoku: Using web technologies in a desktop application. OW2con'15, November...OW2
 
DocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDokuPLM presentation - OW2Con 2015 Community Award winnerDocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDokuPLM presentation - OW2Con 2015 Community Award winnerDocDoku
 
Creating Long Documents Using Adobe InDesign
Creating Long Documents Using Adobe InDesignCreating Long Documents Using Adobe InDesign
Creating Long Documents Using Adobe InDesignMichael Opsteegh
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserAutodesk
 
Impact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationImpact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationJoseph Labrecque
 
Practical workflows for responsive design
Practical workflows for responsive designPractical workflows for responsive design
Practical workflows for responsive designMichael Kowalski
 
Q tales project - WebGL
Q tales project - WebGLQ tales project - WebGL
Q tales project - WebGLqtales
 
Rapid2d C++ Windows8
Rapid2d C++ Windows8Rapid2d C++ Windows8
Rapid2d C++ Windows8Lee Stott
 
Portfolio Janet Dobson 09 16
Portfolio Janet Dobson 09 16Portfolio Janet Dobson 09 16
Portfolio Janet Dobson 09 16Janet Dobson
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive WebsitesPatrick Kennedy
 
Design System Ops
Design System OpsDesign System Ops
Design System OpsQvik
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsVicente Gerardo Guzman Lucio
 
MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013Kim Latreille
 
DevOps for Design - Using Figmagic to support continuous design
DevOps for Design - Using Figmagic to support continuous designDevOps for Design - Using Figmagic to support continuous design
DevOps for Design - Using Figmagic to support continuous designMikael Vesavuori
 
Crossmedia Workflows
Crossmedia WorkflowsCrossmedia Workflows
Crossmedia WorkflowsDwight Kelly
 
Design Drive Interactive Case Studies
Design Drive Interactive Case StudiesDesign Drive Interactive Case Studies
Design Drive Interactive Case StudiesSam Vayner
 

Similaire à From Print Design to Web Design (20)

Website development tool
Website development toolWebsite development tool
Website development tool
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Hey open source, don’t forget the user! - by Chad Kieffer
Hey open source,  don’t forget the user! - by Chad KiefferHey open source,  don’t forget the user! - by Chad Kieffer
Hey open source, don’t forget the user! - by Chad Kieffer
 
DocDoku: Using web technologies in a desktop application. OW2con'15, November...
DocDoku: Using web technologies in a desktop application. OW2con'15, November...DocDoku: Using web technologies in a desktop application. OW2con'15, November...
DocDoku: Using web technologies in a desktop application. OW2con'15, November...
 
DocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDokuPLM presentation - OW2Con 2015 Community Award winnerDocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDokuPLM presentation - OW2Con 2015 Community Award winner
 
Creating Long Documents Using Adobe InDesign
Creating Long Documents Using Adobe InDesignCreating Long Documents Using Adobe InDesign
Creating Long Documents Using Adobe InDesign
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
 
Impact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher EducationImpact of Adobe Edge Tools and Services in Higher Education
Impact of Adobe Edge Tools and Services in Higher Education
 
Practical workflows for responsive design
Practical workflows for responsive designPractical workflows for responsive design
Practical workflows for responsive design
 
Q tales project - WebGL
Q tales project - WebGLQ tales project - WebGL
Q tales project - WebGL
 
Rapid2d C++ Windows8
Rapid2d C++ Windows8Rapid2d C++ Windows8
Rapid2d C++ Windows8
 
Design Based Dev
Design Based DevDesign Based Dev
Design Based Dev
 
Portfolio Janet Dobson 09 16
Portfolio Janet Dobson 09 16Portfolio Janet Dobson 09 16
Portfolio Janet Dobson 09 16
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive Websites
 
Design System Ops
Design System OpsDesign System Ops
Design System Ops
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
 
MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013MagNet 2013 - PR1 2013
MagNet 2013 - PR1 2013
 
DevOps for Design - Using Figmagic to support continuous design
DevOps for Design - Using Figmagic to support continuous designDevOps for Design - Using Figmagic to support continuous design
DevOps for Design - Using Figmagic to support continuous design
 
Crossmedia Workflows
Crossmedia WorkflowsCrossmedia Workflows
Crossmedia Workflows
 
Design Drive Interactive Case Studies
Design Drive Interactive Case StudiesDesign Drive Interactive Case Studies
Design Drive Interactive Case Studies
 

Plus de ESUG

Workshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programmingWorkshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programmingESUG
 
Technical documentation support in Pharo
Technical documentation support in PharoTechnical documentation support in Pharo
Technical documentation support in PharoESUG
 
The Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and RoadmapThe Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and RoadmapESUG
 
Sequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoSequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoESUG
 
Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...ESUG
 
Analyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early resultsAnalyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early resultsESUG
 
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6ESUG
 
A Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test GenerationA Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test GenerationESUG
 
Creating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingCreating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingESUG
 
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution ModesThreaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution ModesESUG
 
Exploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience ReportExploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience ReportESUG
 
Pharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIsPharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIsESUG
 
Garbage Collector Tuning
Garbage Collector TuningGarbage Collector Tuning
Garbage Collector TuningESUG
 
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame CaseImproving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame CaseESUG
 
Pharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FuturePharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FutureESUG
 
thisContext in the Debugger
thisContext in the DebuggerthisContext in the Debugger
thisContext in the DebuggerESUG
 
Websockets for Fencing Score
Websockets for Fencing ScoreWebsockets for Fencing Score
Websockets for Fencing ScoreESUG
 
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScriptShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScriptESUG
 
Advanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocAdvanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocESUG
 
A New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and TransformationsA New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and TransformationsESUG
 

Plus de ESUG (20)

Workshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programmingWorkshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programming
 
Technical documentation support in Pharo
Technical documentation support in PharoTechnical documentation support in Pharo
Technical documentation support in Pharo
 
The Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and RoadmapThe Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and Roadmap
 
Sequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoSequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in Pharo
 
Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...
 
Analyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early resultsAnalyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early results
 
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
 
A Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test GenerationA Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test Generation
 
Creating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingCreating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic Programming
 
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution ModesThreaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
 
Exploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience ReportExploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience Report
 
Pharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIsPharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIs
 
Garbage Collector Tuning
Garbage Collector TuningGarbage Collector Tuning
Garbage Collector Tuning
 
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame CaseImproving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
 
Pharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FuturePharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and Future
 
thisContext in the Debugger
thisContext in the DebuggerthisContext in the Debugger
thisContext in the Debugger
 
Websockets for Fencing Score
Websockets for Fencing ScoreWebsockets for Fencing Score
Websockets for Fencing Score
 
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScriptShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
 
Advanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocAdvanced Object- Oriented Design Mooc
Advanced Object- Oriented Design Mooc
 
A New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and TransformationsA New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and Transformations
 

Dernier

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Dernier (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

From Print Design to Web Design

  • 1. Georg Heeg eK Georg Heeg eK Baroper Str. 337 Wallstraße 22 44227 Dortmund 06366 Köthen Germany Germany Tel: +49-231-97599-0 Tel: +49-3496-214 328 Fax: +49-231-97599-20 Fax: +49-3496-214 712 Georg Heeg AG Seestraße 131 8027 Zürich Switzerland Email: georg@heeg.de 1 Tel: +41(848) 43 34 24 http://www.heeg.de
  • 2. From Print Design to Web Design "Using Smalltalk to Connect both Worlds" Georg Heeg eK 2009 http://www.heeg.de Author: Roland Wagener roland@heeg.de 2
  • 3. From Print Design to Web Design 1. What's the Problem? 2. So, lets build a bridge! 3. Now, lets build a product! 4. It currently looks like this 3
  • 4. What's the Problem? Designers are artists with a special language They are thinking in colors, fonts and perfect images colors Asthetics and good taste are key to their success look at the results: – Brochures, Flyers, Posters, Magazines 4
  • 5. We love to look at Them! But we look at paper, if we adore those results ... Most of the time On the web, we find those gems ransformed into PDF documents or Flash booklets So why is it that we don't look at some beautiful normal HTML-based web pages? 5
  • 6. What Tools do they use? Photoshop, Illustrator, Freehand Pagemaker, Quark-Express, InDesign – They are all mainly targeting at print oriented output – None of them can export a web page • Ok, Photoshop can export an album site, but that's something different ... 6
  • 8. Designing for the Web? PDF Flash HTML 8
  • 9. Designing for the Web II designers export graphic versions of their documents to web programmers The images are decomposed and arranged on a web page The results differ from the original 9
  • 10. Designing for the Web III HTML and its limitations are exposed to the user and influence the design a lot – Can't use all fonts – Shouldn't use all colors – Images squeezed and compressed – Positioning can be fun ... – Learn CSS and you will win A nightmare for a professional designer 10
  • 11. So what options do they have? InDesign© exports into two web compatible formats: PDF and Flash – The whole layout is preserved – It is a one-click operation – no tuning of the result necessary But end users are not always fond of PDF and Flash 11
  • 12. PDF/Flash versus HTML PDF or Flash HTML – Proprietary file format – The web file format – Needs a browser plug- – All browsers support it in • They are optimized for • Plug-ins consume this additional plattform performance – Large files, all pages – Each page is separate are fetched in one go • Shorter load times per • Long download times page – May include fonts not – Simple to interface available on the clients with other web sites computer and web applications – Flash cannot embedd – Flash and other media flash can be embedded 12
  • 13. So, lets build a bridge! Objectives: – designer can stay with the tools he knows well – No need to learn HTML or CSS – export of designer documents to HTML format Like this! 13
  • 14. How did VisualWorks help us? Based on exports of InDesign CS4 – We used the XML frameworks, and build domain objects for each InDesign-page – various image operations are done using an external library to create PNG files – With seaBreeze providing a complete HTML object model, we were able to build a seaBreeze page for each InDesign page • The first prototype was shown to a customer after about two weeks 14
  • 15. Image processing I We started using InkScape, an SVG based vector graphics application – Called from the command line – Available on all platforms (Win, Mac, Linux) – InkScape converts SVG into PNG files – http://www.inkscape.org/ 15
  • 16. Image processing II This approach was very expensive – Starting up InkScape 100 to 1000 times for a conversion took too long – The command line call did not allow us to re-use a running InkScape And InkScape 0.46 created wrong images in certain complex transparency situations 16
  • 17. Image Processing III An alternative was Batik, a Java SVG toolkit – We used JNIPort by Chris Uppall and Joachim Geidel to call it from VisualWorks – The performance improved dramatically • Java starts up just once, • subsequent calls are just very fast – Also available on all platforms – http://xmlgraphics.apache.org/batik/ 17
  • 18. To have or Not to have A designer uses Fonts to attract attention Fonts are key to his work HTML does not allow to make use of fonts reliably – If a font is missing on the client machine, the text will be displayed a default one, like Times, Courier or Helvetica How can we help? 18
  • 19. Display of Text export text as vector paths – This way, the font is used on the designers computer – The client doesn't know about the font at all However, text exported this way will become a PNG image in the web – we are able to attach the original text to the page, but it is not the same – The user has the choice here: • Content or Design 19
  • 20. The Prototype A web application written in seaBreeze Our idea was to deploy the converter as a web based service – Pay-per-conversion – Pay-per-converted page – Pay-per project But users wanted a 'real' application, or even an InDesign Plug-In 20
  • 21. Now, lets build a product From an engineering point of view 'We are finished, we can do it!' From a customer point of view, the solution of the converter as a web service was not acceptable! – No platform integration – No integration into InDesign – No internationalization A standalone MacOSX application is the next goal – Designers love the Mac – And the simpicity of usage 21
  • 22. And so, we are in the process of Preparing a MacOSX application – Interface to the Application Menu – Support the platform help system – Support drag&drop of files – Open the browser on the resulting HTML pages – Inventing icons and herald screens – Writing marketing material – Find a pricing model – ... 22
  • 23. Interface to the Mac-Menu Use the InterfaceBuilder and modify the original MainMenu.nib inside the visual.app/Contents/Resources folder, and put translated versions into the language project folders Use unique MenuItem-IDs but do not change the existing ones! 23
  • 24. Two facets of Internationalization The Mac has one for Resources – Apple-Help is organized this way And VisualWorks has another one for MessageCatalogs – UIs based on UserMessages can use them, the interface to the location inside the .app-folder is via manual modifications 24
  • 25. It currently looks like this 25
  • 26. We are still not finished But we have high hopes! The preparation of the product took longer than the solution of the problem And the name will be: 26
  • 27. Designing for the Web! PDF Flash HTML 27