responsive design con typo3 - t3camp italia 2012 bologna

Bologna 16/17 Novembre 2012

Responsive Web Design

conTYPO3

alfredo furnò

T3Camp Italia Il terzo evento italiano dedicato al CMS Typo3

http://www.t3campitalia.it/

Pag. 2Pag. 2


alfredo furnò

Systems Development Specialist

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


Pag. 3Pag. 3


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


Pag. 4Pag. 4


Che cos'è il Responsive Design

?


Pag. 5Pag. 5


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.


Pag. 6Pag. 6


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

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


Pag. 7Pag. 7


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

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

8



Obiettivo

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

9



10




Pag. 11Pag. 11


?

12



13




Pag. 14Pag. 14


Punti di forzadel



Pag. 15Pag. 15


One url +

Single content+

One code+

Css3 media query

=multiple device


Pag. 18Pag. 18


● Saves Money

● Saves Time

● Improved Seo

● Better Performance

● Wider Browser Support

Vantaggi


Pag. 19Pag. 19


Raccomandato da

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


Pag. 21Pag. 21


Tool


Pag. 22Pag. 22


● 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

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


Pag. 23Pag. 23


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

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://goldilocksapproach.com/

http://www.getskeleton.com/

http://www.prowebdesign.ro/yamb

http://thatcoolguy.github.com/gridless-boilerplate


Pag. 25Pag. 25


TYPO3

http://www.responsinator.com/

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.responsinator.com/

27



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"

}

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://typo3.org/news/article/typo3-60-back-to-the-future/

http://typo3blogger.de/responsive-design-mit-typo3/

http://www.melschmidt.de/web-artikel/responsive-webdesign-mit-typo3-templavoila-und-yaml/


Pag. 29Pag. 29


DemoYAML CSS Framework

for truly flexible, accessible and responsive websites

TYPO3 4.7.7templavoilaws_flexsliderformhandler

static_info_tablest3quixplorer

static_info_tablestt_news


Pag. 30Pag. 30


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/

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


Pag. 32Pag. 32



Pag. 33Pag. 33


The end

34



www.linkedin.com/in/alfredofurno

[email protected]

www.spookyaction.itwww.fiatlinux.it

responsive design con typo3 - t3camp italia 2012 bologna

Technology