Responsive Web Design         con        TYPO3                alfredo furnòT3Camp Italia                                  ...
Responsive Web Design         alfredo furnò         Systems Development Specialist         Organizing technology to meet b...
Responsive Web Design                     Linux Magazine                        N° 39 Marzo 2004                       svi...
Responsive Web Design            Che cosè il         Responsive Design                    ?Pag. 4                http://ww...
Responsive Web Design         Responsive Web Design         Il termine Responsive Web Design (RWD) viene utilizzato       ...
Responsive Web Design         http://www.alistapart.com/articles/responsive-web-design/Pag. 6                             ...
Responsive Web Design         http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo/P...
Responsive Web Design                       8ObiettivoCreare siti web che rispondono al dispositivo dellutentein base a di...
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           DesignPag.               http:/...
Responsive Web Design           One url              +       Single content              +          One code              ...
Responsive Web Design           Vantaggi       ●   Saves Money       ●   Saves Time       ●   Improved Seo       ●   Bette...
Responsive Web Design       Raccomandato            daPag.               http://www.t3campitalia.it/
Responsive Web Design                        20“Google recommends webmasters follow theindustry best practice of using res...
Responsive Web Design            ToolPag.             http://www.t3campitalia.it/
Responsive Web Design           Framework & Boilerplate       ●   The Goldilocks Approach - http://goldilocksapproach.com ...
Responsive Web Design       Responsinator       http://www.responsinator.com       Responsinator permette di testare il la...
Responsive Web Design                         24Responsinatorhttp://www.responsinator.com●   iPhone 3+4 portrait 320 x 480...
Responsive Web Design          TYPO3Pag.             http://www.t3campitalia.it/
Responsive Web Design                                               26    Risorse su TYPO3 & Responsive Web Design●    TYP...
Responsive Web Design                                 27Typoscript# Doctypeconfig.doctype = html_5# Viewport Meta Tagpage....
Responsive Web Design                             28CSSimg, embed, object, video { max-width: 100%; height: auto; width: a...
Responsive Web Design                        Demo                         YAML CSS Framework       for truly flexible, acc...
Responsive Web Design       TYPO3 4.7 Release Notes       TYPO3 harmonizes with HTML5       Wherever rich media content (i...
Responsive Web Design                       31                Lista della spesa●   Approccio Content out●   Design e layou...
Responsive Web DesignPag.             http://www.t3campitalia.it/
Responsive Web Design       The endPag.             http://www.t3campitalia.it/
Responsive Web Design                     34www.linkedin.com/in/alfredofurnoalfredof72@gmail.comwww.spookyaction.itwww.fia...
Upcoming SlideShare
Loading in...5
×

Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna

1,126

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,126
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Design con TYPO3 - T3Camp Italia 2012 Bologna

  1. 1. Responsive Web Design con TYPO3 alfredo furnòT3Camp Italia Bologna 16/17 NovembreIl terzo evento italiano dedicato al CMS Typo3 2012
  2. 2. Responsive Web Design alfredo furnò Systems Development Specialist Organizing technology to meet business goals with Open Source Solutions for Small BusinessPag. 2 http://www.t3campitalia.it/
  3. 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 webPag. 3 http://www.t3campitalia.it/
  4. 4. Responsive Web Design Che cosè il Responsive Design ?Pag. 4 http://www.t3campitalia.it/
  5. 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 dellambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo allutente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale. Da Wikipedia, lenciclopedia libera.Pag. 5 http://www.t3campitalia.it/
  6. 6. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/Pag. 6 http://www.t3campitalia.it/
  7. 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. 8. Responsive Web Design 8ObiettivoCreare siti web che rispondono al dispositivo dellutentein base a dimensione dello schermo, risoluzione efunzioni. http://www.t3campitalia.it/
  9. 9. Responsive Web Design 9 http://www.t3campitalia.it/
  10. 10. Responsive Web Design 10 http://www.t3campitalia.it/
  11. 11. Responsive Web Design ?Pag. http://www.t3campitalia.it/
  12. 12. Responsive Web Design 12 http://www.t3campitalia.it/
  13. 13. Responsive Web Design 13 http://www.t3campitalia.it/
  14. 14. Responsive Web Design Punti di forza del Responsive Web DesignPag. http://www.t3campitalia.it/
  15. 15. Responsive Web Design One url + Single content + One code + Css3 media query = multiple devicePag. http://www.t3campitalia.it/
  16. 16. Responsive Web Design Vantaggi ● Saves Money ● Saves Time ● Improved Seo ● Better Performance ● Wider Browser SupportPag. http://www.t3campitalia.it/
  17. 17. Responsive Web Design Raccomandato daPag. http://www.t3campitalia.it/
  18. 18. Responsive Web Design 20“Google recommends webmasters follow theindustry best practice of using responsive webdesign, namely serving the same HTML for alldevices and using only CSS media queries todecide the rendering on each device.”https://developers.google.com/webmasters/smartphone-sites http://www.t3campitalia.it/
  19. 19. Responsive Web Design ToolPag. http://www.t3campitalia.it/
  20. 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-boilerplatePag. http://www.t3campitalia.it/
  21. 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. 22. Responsive Web Design 24Responsinatorhttp://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. 23. Responsive Web Design TYPO3Pag. http://www.t3campitalia.it/
  24. 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. 25. Responsive Web Design 27Typoscript# Doctypeconfig.doctype = html_5# Viewport Meta Tagpage.headerData.10=TEXTpage.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. 26. Responsive Web Design 28CSSimg, 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. 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_newsPag. http://www.t3campitalia.it/
  28. 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. 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. 30. Responsive Web DesignPag. http://www.t3campitalia.it/
  31. 31. Responsive Web Design The endPag. http://www.t3campitalia.it/
  32. 32. Responsive Web Design 34www.linkedin.com/in/alfredofurnoalfredof72@gmail.comwww.spookyaction.itwww.fiatlinux.it http://www.t3campitalia.it/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×