responsive design con typo3 - t3camp italia 2012 bologna
DESCRIPTION
E' oramai assolutamente necessario realizzare siti web che si adattano a dispositivi con risoluzioni e dimensioni diverse come desktop, tablet e smartphone. In questo talk si affronterà il Responsive Design, come progettare per più dispositivi un sito in modo che il layout si adatti alla larghezza dello schermo dell'utente. E mostrerà come sviluppare un sito web Responsive con TYPO3.TRANSCRIPT
![Page 1: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/1.jpg)
Bologna 16/17 Novembre 2012
Responsive Web Design
conTYPO3
alfredo furnò
T3Camp Italia Il terzo evento italiano dedicato al CMS Typo3
![Page 2: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/2.jpg)
http://www.t3campitalia.it/
Pag. 2Pag. 2
Responsive Web Design
alfredo furnò
Systems Development Specialist
Organizing technology to meet business goals with Open Source Solutions for Small Business
![Page 3: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/3.jpg)
http://www.t3campitalia.it/
Pag. 3Pag. 3
Responsive Web Design
Linux MagazineN° 39 Marzo 2004
sviluppo web
Content management professionale
Introduzione a Typo3, il più completo sistema in PhP
per la gestione dei contenuti web
![Page 4: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/4.jpg)
http://www.t3campitalia.it/
Pag. 4Pag. 4
Responsive Web Design
Che cos'è il Responsive Design
?
![Page 5: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/5.jpg)
http://www.t3campitalia.it/
Pag. 5Pag. 5
Responsive Web Design
Responsive Web DesignIl 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.
![Page 6: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/6.jpg)
http://www.t3campitalia.it/
Pag. 6Pag. 6
Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
![Page 7: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/7.jpg)
http://www.t3campitalia.it/
Pag. 7Pag. 7
Responsive Web Design
http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo/
![Page 8: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/8.jpg)
8
http://www.t3campitalia.it/
Responsive Web Design
Obiettivo
Creare siti web che rispondono al dispositivo dell'utente in base a dimensione dello schermo, risoluzione e funzioni.
![Page 9: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/9.jpg)
9
http://www.t3campitalia.it/
Responsive Web Design
![Page 10: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/10.jpg)
10
http://www.t3campitalia.it/
Responsive Web Design
![Page 11: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/11.jpg)
http://www.t3campitalia.it/
Pag. 11Pag. 11
Responsive Web Design
?
![Page 12: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/12.jpg)
12
http://www.t3campitalia.it/
Responsive Web Design
![Page 13: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/13.jpg)
13
http://www.t3campitalia.it/
Responsive Web Design
![Page 14: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/14.jpg)
http://www.t3campitalia.it/
Pag. 14Pag. 14
Responsive Web Design
Punti di forzadel
Responsive Web Design
![Page 15: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/15.jpg)
http://www.t3campitalia.it/
Pag. 15Pag. 15
Responsive Web Design
One url +
Single content+
One code+
Css3 media query
=multiple device
![Page 16: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/16.jpg)
http://www.t3campitalia.it/
Pag. 18Pag. 18
Responsive Web Design
● Saves Money
● Saves Time
● Improved Seo
● Better Performance
● Wider Browser Support
Vantaggi
![Page 17: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/17.jpg)
http://www.t3campitalia.it/
Pag. 19Pag. 19
Responsive Web Design
Raccomandato da
![Page 18: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/18.jpg)
20
http://www.t3campitalia.it/
Responsive Web Design
“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
![Page 19: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/19.jpg)
http://www.t3campitalia.it/
Pag. 21Pag. 21
Responsive Web Design
Tool
![Page 20: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/20.jpg)
http://www.t3campitalia.it/
Pag. 22Pag. 22
Responsive Web Design
● The Goldilocks Approach - http://goldilocksapproach.com
● Skeleton - http://www.getskeleton.com
● Yamb - http://www.prowebdesign.ro/yamb
● Gridless - http://thatcoolguy.github.com/gridless-boilerplate
Framework & Boilerplate
![Page 21: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/21.jpg)
http://www.t3campitalia.it/
Pag. 23Pag. 23
Responsive Web Design
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.
Responsinator http://www.responsinator.com
![Page 22: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/22.jpg)
24
http://www.t3campitalia.it/
Responsive Web Design
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
![Page 23: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/23.jpg)
http://www.t3campitalia.it/
Pag. 25Pag. 25
Responsive Web Design
TYPO3
![Page 24: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/24.jpg)
26
http://www.t3campitalia.it/
Responsive Web Design
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/
![Page 25: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/25.jpg)
27
http://www.t3campitalia.it/
Responsive Web Design
Typoscript# Doctypeconfig.doctype = html_5
# Viewport Meta Tagpage.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"
}
![Page 26: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/26.jpg)
28
http://www.t3campitalia.it/
Responsive Web Design
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) { ...}
![Page 27: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/27.jpg)
http://www.t3campitalia.it/
Pag. 29Pag. 29
Responsive Web Design
DemoYAML CSS Framework
for truly flexible, accessible and responsive websites
TYPO3 4.7.7templavoilaws_flexsliderformhandler
static_info_tablest3quixplorer
static_info_tablestt_news
![Page 28: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/28.jpg)
http://www.t3campitalia.it/
Pag. 30Pag. 30
Responsive Web Design
TYPO3 4.7 Release NotesTYPO3 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/
![Page 29: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/29.jpg)
31
http://www.t3campitalia.it/
Responsive Web Design
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
![Page 30: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/30.jpg)
http://www.t3campitalia.it/
Pag. 32Pag. 32
Responsive Web Design
![Page 31: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/31.jpg)
http://www.t3campitalia.it/
Pag. 33Pag. 33
Responsive Web Design
The end
![Page 32: Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna](https://reader033.vdocument.in/reader033/viewer/2022060120/5593050f1a28ab4e768b46d3/html5/thumbnails/32.jpg)
34
http://www.t3campitalia.it/
Responsive Web Design
www.linkedin.com/in/alfredofurno
www.spookyaction.itwww.fiatlinux.it