SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
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/

Más contenido relacionado

Similar a 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 designpsophy
 
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 WorldDoug Gapinski
 
NayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesignNayLinnKo_BIT_InteractionDesign
NayLinnKo_BIT_InteractionDesignNay Linn Ko
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designingAanand Bohara
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug 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 WorldmStoner, Inc.
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivePeter 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 WebsiteJj Jurgens
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Digital Content Retrieval Final Report
Digital Content Retrieval Final ReportDigital Content Retrieval Final Report
Digital Content Retrieval Final ReportKourosh 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 needsSEGIC
 
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 & CSS3Doris Chen
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Epitome Solutions Ltd
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009Tom Deryckere
 

Similar a 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
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 

Último (20)

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 

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/