SlideShare a Scribd company logo
Responsive Web Design
         con
        TYPO3


                alfredo furnò




T3Camp Italia                                    Bologna 16/17 Novembre
Il terzo evento italiano dedicato al CMS Typo3   2012
Responsive Web Design




         alfredo furnò

         Systems Development Specialist
         Organizing technology to meet business goals with
         Open Source Solutions
         for Small Business




Pag. 2                                           http://www.t3campitalia.it/
Responsive Web Design


                     Linux Magazine
                        N° 39 Marzo 2004


                       sviluppo web

                  Content management
                     professionale

                  Introduzione a Typo3, il più
                   completo sistema in PhP
                       per la gestione dei
                         contenuti web



Pag. 3             http://www.t3campitalia.it/
Responsive Web Design




            Che cos'è il
         Responsive Design
                    ?


Pag. 4                http://www.t3campitalia.it/
Responsive Web Design



         Responsive Web Design
         Il termine Responsive Web Design (RWD) viene utilizzato
         per indicare una particolare tecnica di Web design per la
         realizzazione di siti web in modo che le pagine adattino
         automaticamente il layout per fornire una visualizzazione
         ottimale in funzione dell'ambiente nei quali vengono
         visualizzati (pc su desktop con diverse risoluzioni, tablet,
         smartphone, cellulari di vecchia generazione, web tv)
         riducendo al minimo all'utente la necessità di
         ridimensionamento e scorrimento, in particolare quello
         orizzontale.
                                    Da Wikipedia, l'enciclopedia libera.



Pag. 5                                  http://www.t3campitalia.it/
Responsive Web Design




         http://www.alistapart.com/articles/responsive-web-design/


Pag. 6                                           http://www.t3campitalia.it/
Responsive Web Design




         http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo/




Pag. 7                                                  http://www.t3campitalia.it/
Responsive Web Design                       8


Obiettivo
Creare siti web che rispondono al dispositivo dell'utente
in base a dimensione dello schermo, risoluzione e
funzioni.




                              http://www.t3campitalia.it/
Responsive Web Design                   9




          http://www.t3campitalia.it/
Responsive Web Design                   10




          http://www.t3campitalia.it/
Responsive Web Design




               ?

Pag.             http://www.t3campitalia.it/
Responsive Web Design                   12




          http://www.t3campitalia.it/
Responsive Web Design                   13




          http://www.t3campitalia.it/
Responsive Web Design




        Punti di forza
             del
       Responsive Web
           Design

Pag.               http://www.t3campitalia.it/
Responsive Web Design



           One url
              +
       Single content
              +
          One code
              +
        Css3 media
           query
              =
       multiple device



Pag.                       http://www.t3campitalia.it/
Responsive Web Design




           Vantaggi

       ●   Saves Money
       ●   Saves Time
       ●   Improved Seo
       ●   Better Performance
       ●   Wider Browser Support



Pag.                               http://www.t3campitalia.it/
Responsive Web Design




       Raccomandato
            da


Pag.               http://www.t3campitalia.it/
Responsive Web Design                        20




“Google recommends webmasters follow the
industry best practice of using responsive web
design, namely serving the same HTML for all
devices and using only CSS media queries to
decide the rendering on each device.”


https://developers.google.com/webmasters/smartphone-sites




                               http://www.t3campitalia.it/
Responsive Web Design




            Tool



Pag.             http://www.t3campitalia.it/
Responsive Web Design




           Framework & Boilerplate

       ●   The Goldilocks Approach - http://goldilocksapproach.com
       ●   Skeleton - http://www.getskeleton.com
       ●   Yamb - http://www.prowebdesign.ro/yamb
       ●   Gridless - http://thatcoolguy.github.com/gridless-boilerplate




Pag.                                     http://www.t3campitalia.it/
Responsive Web Design




       Responsinator
       http://www.responsinator.com
       Responsinator permette di testare il layout di siti
       web su dispositivi mobili differenti come:
        ●   iPhone
        ●   iPad
        ●   Android
        ●   Kindle
       Per ogni dispositivo é possibile analizzare in layout in
       modalità portrait e landscape.



Pag.                                        http://www.t3campitalia.it/
Responsive Web Design                         24



Responsinator
http://www.responsinator.com

●   iPhone 3+4 portrait 320 x 480
●   iPhone 3+4 landscape 480 x 320
●   iPhone 5 portrait 320 x 568
●   iPhone 5 landscape 568 x 320
●   Crappy Android portrait 240 x 320
●   Crappy Android landscape 320 x 240
●   Android (Samsung Galaxy) portrait 380 by 685
●   Android (Samsung Galaxy) landscape 685 by 380
●   iPad portrait 768 x 1024
●   iPad landscape 1024 x 768
●   Kindle portrait 600 x 1024
●   Kindle landscape 1024 x 600

                                  http://www.t3campitalia.it/
Responsive Web Design




          TYPO3



Pag.             http://www.t3campitalia.it/
Responsive Web Design                                               26




    Risorse su TYPO3 & Responsive Web Design

●    TYPO3 6.0 - Back to the Future
     http://typo3.org/news/article/typo3-60-back-to-the-future/

●    Responsive Design mit TYPO3 – Türchen 22
     http://typo3blogger.de/responsive-design-mit-typo3/

●    Responsive Webdesign mit YAML, TYPO3 und TemplaVoilà!
http://www.melschmidt.de/web-artikel/responsive-webdesign-mit-typo3-templavoila-und-yaml/




                                           http://www.t3campitalia.it/
Responsive Web Design                                 27



Typoscript
# Doctype
config.doctype = html_5

# Viewport Meta Tag
page.headerData.10=TEXT
page.headerData.10.value (
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
)

tt_content.image.20 {
    1.params = class="flexible"
}

tt_content.textpic.20 {
    1.params = class="flexible"
}



                                        http://www.t3campitalia.it/
Responsive Web Design                             28


CSS
img, embed, object, video {
 max-width: 100%;
 height: auto;
 width: auto;
}

CSS3 Media Queries

@media   screen and (max-width: 320px) {
 ...
}
@media   screen and (max-width: 480px) {
 ...
}
@media   screen and (max-width: 760px) {
 ...
}
@media   screen and (max-width: 1024px) {
 ...
}



                                       http://www.t3campitalia.it/
Responsive Web Design




                        Demo
                         YAML CSS Framework
       for truly flexible, accessible and responsive websites

                            TYPO3 4.7.7
                            templavoila
                           ws_flexslider
                            formhandler
                         static_info_tables
                            t3quixplorer
                         static_info_tables
                              tt_news



Pag.                               http://www.t3campitalia.it/
Responsive Web Design


       TYPO3 4.7 Release Notes
       TYPO3 harmonizes with HTML5
       Wherever rich media content (images, audio or video) needs to be integrated on
       various platforms, HTML5 has established itself as the de facto standard in
       development of modern websites. Therefore with TYPO3 version 4.7, HTML5
       conformity is now a core feature. What was possible in earlier versions of TYPO3 only
       by using third party extensions or custom configuration, can now be achieved very
       easily. In conjunction with the system extension ›CSS Styled Content‹, TYPO3 version
       4.7 now generates clean HTML5 source code that corresponds to the W3C validation
       guidelines.

       The feature-enhanced and HTML5 optimized Rich Text Editor (RTE) can be adapted
       much more easily to individual needs. In addition, the integration of HTML5 video
       and audio files is now possible as well as the simultaneous uploading of multiple files
       within TCEForms. For video content TYPO3 version 4.7 uses the JavaScript library
       VideoJS and Flowplayer as fallback.

          http://typo3.org/download/release-notes/typo3-4-7-release-notes/


Pag.                                              http://www.t3campitalia.it/
Responsive Web Design                       31



                Lista della spesa
●   Approccio 'Content out'
●   Design e layout per tutti i dispositivi
●   Layout: colonne e larghezza
●   Navigazione semplice
●   Dimensione e formato del testo
●   Immagini e oggetti
●   App mobile e siti web responsive a confronto
●   Media query css3 per il RESPONSIVE DESIGN
●   Scripting per le funzioni aggiuntive




                               http://www.t3campitalia.it/
Responsive Web Design




Pag.             http://www.t3campitalia.it/
Responsive Web Design




       The end



Pag.             http://www.t3campitalia.it/
Responsive Web Design                     34




www.linkedin.com/in/alfredofurno

alfredof72@gmail.com

www.spookyaction.it
www.fiatlinux.it




                       http://www.t3campitalia.it/

More Related Content

Similar to Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna

Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day psophy
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
psophy
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Heru WIjayanto
 
24 Tips for SITECORE
24 Tips for SITECORE24 Tips for SITECORE
24 Tips for SITECORE
Meghana IT Origins
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Doug Gapinski
 
NayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesignNayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesign
Nay Linn Ko
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
Aanand Bohara
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
Doug Gapinski
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal AccessKate Walser
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
mStoner, Inc.
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
Peter Rozek
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
Achieve Internet
 
Digital Content Retrieval Final Report
Digital Content Retrieval Final ReportDigital Content Retrieval Final Report
Digital Content Retrieval Final Report
Kourosh Sajjadi
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Frédéric Harper
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
Epitome Solutions Ltd
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
Tom Deryckere
 

Similar to Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna (20)

Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
24 Tips for SITECORE
24 Tips for SITECORE24 Tips for SITECORE
24 Tips for SITECORE
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
NayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesignNayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesign
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal Access
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Digital Content Retrieval Final Report
Digital Content Retrieval Final ReportDigital Content Retrieval Final Report
Digital Content Retrieval Final Report
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
 

Recently uploaded

RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
Jen Stirrup
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 

Recently uploaded (20)

RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 

Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna

  • 1. Responsive Web Design con TYPO3 alfredo furnò T3Camp Italia Bologna 16/17 Novembre Il terzo evento italiano dedicato al CMS Typo3 2012
  • 2. Responsive Web Design alfredo furnò Systems Development Specialist Organizing technology to meet business goals with Open Source Solutions for Small Business Pag. 2 http://www.t3campitalia.it/
  • 3. Responsive Web Design Linux Magazine N° 39 Marzo 2004 sviluppo web Content management professionale Introduzione a Typo3, il più completo sistema in PhP per la gestione dei contenuti web Pag. 3 http://www.t3campitalia.it/
  • 4. Responsive Web Design Che cos'è il Responsive Design ? Pag. 4 http://www.t3campitalia.it/
  • 5. Responsive Web Design Responsive Web Design Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell'ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all'utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale. Da Wikipedia, l'enciclopedia libera. Pag. 5 http://www.t3campitalia.it/
  • 6. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ Pag. 6 http://www.t3campitalia.it/
  • 7. Responsive Web Design http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo/ Pag. 7 http://www.t3campitalia.it/
  • 8. Responsive Web Design 8 Obiettivo Creare siti web che rispondono al dispositivo dell'utente in base a dimensione dello schermo, risoluzione e funzioni. http://www.t3campitalia.it/
  • 9. Responsive Web Design 9 http://www.t3campitalia.it/
  • 10. Responsive Web Design 10 http://www.t3campitalia.it/
  • 11. Responsive Web Design ? Pag. http://www.t3campitalia.it/
  • 12. Responsive Web Design 12 http://www.t3campitalia.it/
  • 13. Responsive Web Design 13 http://www.t3campitalia.it/
  • 14. Responsive Web Design Punti di forza del Responsive Web Design Pag. http://www.t3campitalia.it/
  • 15. Responsive Web Design One url + Single content + One code + Css3 media query = multiple device Pag. http://www.t3campitalia.it/
  • 16. Responsive Web Design Vantaggi ● Saves Money ● Saves Time ● Improved Seo ● Better Performance ● Wider Browser Support Pag. http://www.t3campitalia.it/
  • 17. Responsive Web Design Raccomandato da Pag. http://www.t3campitalia.it/
  • 18. Responsive Web Design 20 “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.” https://developers.google.com/webmasters/smartphone-sites http://www.t3campitalia.it/
  • 19. Responsive Web Design Tool Pag. http://www.t3campitalia.it/
  • 20. Responsive Web Design Framework & Boilerplate ● The Goldilocks Approach - http://goldilocksapproach.com ● Skeleton - http://www.getskeleton.com ● Yamb - http://www.prowebdesign.ro/yamb ● Gridless - http://thatcoolguy.github.com/gridless-boilerplate Pag. http://www.t3campitalia.it/
  • 21. Responsive Web Design Responsinator http://www.responsinator.com Responsinator permette di testare il layout di siti web su dispositivi mobili differenti come: ● iPhone ● iPad ● Android ● Kindle Per ogni dispositivo é possibile analizzare in layout in modalità portrait e landscape. Pag. http://www.t3campitalia.it/
  • 22. Responsive Web Design 24 Responsinator http://www.responsinator.com ● iPhone 3+4 portrait 320 x 480 ● iPhone 3+4 landscape 480 x 320 ● iPhone 5 portrait 320 x 568 ● iPhone 5 landscape 568 x 320 ● Crappy Android portrait 240 x 320 ● Crappy Android landscape 320 x 240 ● Android (Samsung Galaxy) portrait 380 by 685 ● Android (Samsung Galaxy) landscape 685 by 380 ● iPad portrait 768 x 1024 ● iPad landscape 1024 x 768 ● Kindle portrait 600 x 1024 ● Kindle landscape 1024 x 600 http://www.t3campitalia.it/
  • 23. Responsive Web Design TYPO3 Pag. http://www.t3campitalia.it/
  • 24. Responsive Web Design 26 Risorse su TYPO3 & Responsive Web Design ● TYPO3 6.0 - Back to the Future http://typo3.org/news/article/typo3-60-back-to-the-future/ ● Responsive Design mit TYPO3 – Türchen 22 http://typo3blogger.de/responsive-design-mit-typo3/ ● Responsive Webdesign mit YAML, TYPO3 und TemplaVoilà! http://www.melschmidt.de/web-artikel/responsive-webdesign-mit-typo3-templavoila-und-yaml/ http://www.t3campitalia.it/
  • 25. Responsive Web Design 27 Typoscript # Doctype config.doctype = html_5 # Viewport Meta Tag page.headerData.10=TEXT page.headerData.10.value ( <meta name="viewport" content="width=device-width, initial-scale=1.0" > ) tt_content.image.20 { 1.params = class="flexible" } tt_content.textpic.20 { 1.params = class="flexible" } http://www.t3campitalia.it/
  • 26. Responsive Web Design 28 CSS img, embed, object, video { max-width: 100%; height: auto; width: auto; } CSS3 Media Queries @media screen and (max-width: 320px) { ... } @media screen and (max-width: 480px) { ... } @media screen and (max-width: 760px) { ... } @media screen and (max-width: 1024px) { ... } http://www.t3campitalia.it/
  • 27. Responsive Web Design Demo YAML CSS Framework for truly flexible, accessible and responsive websites TYPO3 4.7.7 templavoila ws_flexslider formhandler static_info_tables t3quixplorer static_info_tables tt_news Pag. http://www.t3campitalia.it/
  • 28. Responsive Web Design TYPO3 4.7 Release Notes TYPO3 harmonizes with HTML5 Wherever rich media content (images, audio or video) needs to be integrated on various platforms, HTML5 has established itself as the de facto standard in development of modern websites. Therefore with TYPO3 version 4.7, HTML5 conformity is now a core feature. What was possible in earlier versions of TYPO3 only by using third party extensions or custom configuration, can now be achieved very easily. In conjunction with the system extension ›CSS Styled Content‹, TYPO3 version 4.7 now generates clean HTML5 source code that corresponds to the W3C validation guidelines. The feature-enhanced and HTML5 optimized Rich Text Editor (RTE) can be adapted much more easily to individual needs. In addition, the integration of HTML5 video and audio files is now possible as well as the simultaneous uploading of multiple files within TCEForms. For video content TYPO3 version 4.7 uses the JavaScript library VideoJS and Flowplayer as fallback. http://typo3.org/download/release-notes/typo3-4-7-release-notes/ Pag. http://www.t3campitalia.it/
  • 29. Responsive Web Design 31 Lista della spesa ● Approccio 'Content out' ● Design e layout per tutti i dispositivi ● Layout: colonne e larghezza ● Navigazione semplice ● Dimensione e formato del testo ● Immagini e oggetti ● App mobile e siti web responsive a confronto ● Media query css3 per il RESPONSIVE DESIGN ● Scripting per le funzioni aggiuntive http://www.t3campitalia.it/
  • 30. Responsive Web Design Pag. http://www.t3campitalia.it/
  • 31. Responsive Web Design The end Pag. http://www.t3campitalia.it/
  • 32. Responsive Web Design 34 www.linkedin.com/in/alfredofurno alfredof72@gmail.com www.spookyaction.it www.fiatlinux.it http://www.t3campitalia.it/