Template Multidevice con TYPO3
Upcoming SlideShare
Loading in...5
×
 

Template Multidevice con TYPO3

on

  • 1,028 views

T3CAMP Italia 2011: Esempi e soluzioni per creare in TYPO3 dei layout che possano adattarsi a device con diverse dimensioni, risoluzioni, interfacce ecc... Con particolare attenzione ai dispositivi ...

T3CAMP Italia 2011: Esempi e soluzioni per creare in TYPO3 dei layout che possano adattarsi a device con diverse dimensioni, risoluzioni, interfacce ecc... Con particolare attenzione ai dispositivi mobile.

Statistics

Views

Total Views
1,028
Views on SlideShare
983
Embed Views
45

Actions

Likes
1
Downloads
3
Comments
0

3 Embeds 45

http://www.t3campitalia.it 43
http://2011.t3campitalia.it 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Template Multidevice con TYPO3 Template Multidevice con TYPO3 Presentation Transcript

  • Template multi- device per un sito in TYPO3 Relatore: Nicola Della Marina.T3Camp Italia Bologna 28/29 Ottobre 2011Il secondo evento italiano dedicato a Typo3
  • Nicola Della Marina  Website Developer a WEBFORMAT  Certificato TYPO3 Integrator dal 2009  Da oltre 10 anni nello sviluppo di progetti web  TYPO3 trainer con oltre 200 ore di formazione in aula  Copertura di tutta la realizzazione del sito: template, configurazione delle estensioni e sviluppo di estensioni personalizzate  Contacts:  nicola.dellamarina@webformat.com  www.webformat.comPag. 2 http://www.t3campitalia.it/
  • Template multi-device con TYPO3 Cosa intendiamo con ‘device’Pag. 3 http://www.t3campitalia.it/
  • Un po’ di statistichePag. 4 http://www.t3campitalia.it/
  • Un po’ di statistichePag. 5 http://www.t3campitalia.it/
  • Un po’ di statistichePag. 6 http://www.t3campitalia.it/
  • «Voglio che il mio sito si veda bene anche su [iPhone|iPad|Smart TV]» Un problema di layout Un problema di contestoPag. 7 http://www.t3campitalia.it/
  • Un problema di contestoPag. 8 http://www.t3campitalia.it/
  • Cosa possiamo fare? • Creare un template ‘adattabile’ • Rimuovere le immagini e i contenuti non necessari • Ingrandire le aree cliccabili • Ingrandire il testo piccolo • Gestire lo scrolling verticale • Ottimizzare le form • … e molto altroPag. 9 http://www.t3campitalia.it/
  • Gli strumenti a nostra disposizione • CSS 3 • HTML5 • Framework Javascript • TYPO3Pag. 10 http://www.t3campitalia.it/
  • Cosa possiamo farePag. 11 http://www.t3campitalia.it/
  • Cosa possiamo farePag. 12 http://www.t3campitalia.it/
  • Cosa possiamo farePag. 13 http://www.t3campitalia.it/
  • Il giusto CSS… … in base al media HandheldPag. 14 http://www.t3campitalia.it/
  • Il giusto CSS… …in base alla risoluzione Media queriesPag. 15 http://www.t3campitalia.it/
  • Il giusto HTML… …per gestire gli ingrandimentiPag. 16 http://www.t3campitalia.it/
  • Il giusto HTML… No SìPag. 17 http://www.t3campitalia.it/
  • Il giusto HTML… ViewportPag. 18 http://www.t3campitalia.it/
  • Il giusto HTML I campi di inputPag. 19 http://www.t3campitalia.it/
  • Il giusto HTML I campi di input (Estensioni che supportano i form HTML5) • Powermail • FormhandlerPag. 20 http://www.t3campitalia.it/
  • Il giusto HTML Non tutti i device supportano tutte le tecnologiePag. 21 http://www.t3campitalia.it/
  • Framework JavascriptPag. 22 http://www.t3campitalia.it/
  • Riconoscere il device… WURFLPag. 23 http://www.t3campitalia.it/
  • Ridefinire l’output Redirigere l’utente • Mobile Redirect (cwmobileredirect) Ridefinire il template • Typoscript conditions (useragent o userFunc) Ridefinire i contenuti • wfmobilePag. 24 http://www.t3campitalia.it/
  • UtilitiesPag. 25 http://www.t3campitalia.it/
  • Utilities Inserire una icona per i bookmark su iPhonePag. 26 http://www.t3campitalia.it/
  • Utilities Per iniziare… • Mobify (mobify.com) • Wapple (wapple.net)Pag. 27 http://www.t3campitalia.it/
  • Come testare il sito • Emulatori online • Emulatori degli strumenti di sviluppo (SDK) • Comprare il devicePag. 28 http://www.t3campitalia.it/
  • Q&APag. 29 http://www.t3campitalia.it/