1. Novità in Visual Studio 2012
per lo sviluppo Web
Marco Assandri
Torino Technologies Group – 13 novembre 2012
2. Agenda
• Preparazione dell’ambiente
• Novità principali
• Web Essentials
• LESS
• Typescript
3. Preparazione dell’ambiente
• Gli esempi mostrati durante questa presentazione
presuppongono la configurazione di Visual Studio
2012 come Web Development environment.
5. Preparazione dell’ambiente
• vanno aggiunti i seguenti plugin:
– TypeScript for Microsoft Visual Studio 2012
– Web Essentials 2012
– Image Optimizer
7. Novità principali
• Compatibilità della soluzione con Visual Studio 2010
SP1
– I progetti, anche dopo l’upgrade a Visual Studio 2012,
possono essere letti e modificati con Visual Studio 2010
SP1
– Favorisce la condivisione e elimina la necessità di avere
tutti lo stesso ambiente
8. Novità principali
• Supporto HTML5 e correlati
– Supporto dei nuovi tag semantici introdotti da HTML5
– Supporto Web Accessibility Initiative - Accessible Rich
Internet Applications (WAI-ARIA)
– Disponibili snippet specifici per HTML5
– Rinomina automatica del fine tag
– Smart Tasks, estrai user control e event binding
– Intellisense nel page source migliorato
– Possibilità di visualizzare con browser differenti
– Nuovi template (MVC 4, Mobile, …) e miglioramento dei
vecchi
– DEMO
9. Novità principali
• Supporto Javascript
– Supporta ECMAScript 5
– Funzionalità di match delle parentesi e di collapse di
regioni
– Intellisense migliorato e miglior supporto del DOM
– Go to definition
– Documentazione <signature>
– DEMO
10. Novità principali
• Supporto CSS3
– Scelta dello stile di riformattazione
– Intellisense migliorato e auto riduzione delle voci di
completamento
– Indentazione
– Support CSS Hacks e caratteristiche Vendor Specific
– Commenti disponibili dall’IDE, region collapse
– Color picker
– Snippet per cross browser styles e scenari avanzati(media
queries, …)
– DEMO
12. Web Essentials 2012
• Minification
• Utility varie encoding, decoding e trasformazioni di stringhe
(maiscolo, hash, …)
• Make visible only for IE
• Aggiunta proprietà Vendor Specific e standard ai CSS
• Visualizzazione dei browser supportati per ogni proprietà
(http://realworldvalidator.com)
• Identificazioni classi di Modernizr
• Intellisense per Add region, important, custom fonts,
animations, url picker, gradienti
• Indicazione degli errori che possono portare ad
incompatibilità tra i browser
• Embed immagini in base64
• DEMO
13. Web Essentials 2012
• Rimozione di proprietà duplicate, ordinamento,
rimozione di proprietà non supportate
• Shortcuts per variazione dei colori e delle proprietà
(SHIFT+CTRL+ARROW UP/DOWN)
• F1 per informazioni aggiuntive sulla proprietà
• Preview Font e immagini
• Supporto a TypeScript, LESS e CoffeeScript con
finestra di preview laterale e generazione
automatica dei file finali minificati
• DEMO
14. Web Essentials 2012
• Minificazione dei file da menù contestuale con file di
mapping per debug facilitato (supportato su chrome
abilitando Enable Source Maps)
• Supporto JsDoc usato da diverse librerie
• Paste JSON as classes
• Paste XML as classes
• ZenCoding (http://www.johnpapa.net/zen-coding-
in-visual-studio-2012/)
• DEMO
15. Image Optimizer
• Ottimizza le immagini senza perdita di qualità
• Funzionalità spesso sottovalutata ma molto utile
• Esempio di utilizzo in codice proprio
• DEMO
16. LESS
• Estende i CSS con variabili, mixins, funzioni e
operazioni (http://lesscss.org/)
• Con Web Essentials viene già generato il codice CSS
• Senza Web Essentials conviene installare DotLess
(http://www.dotlesscss.org/) per la generazione dei
CSS a runtime
• DEMO
17. Typescript
• Estende Javascript ed è pensato per scrivere applicazioni
complesse in Javascript
• Il codice finale risultante è Javascript
• Ogni codice Javascript è un codice Typescript valido
• Rispetto a Script#, legge tutte le librerie JS in quanto
alla fine si tratta di un Javascript esteso
• Disponibile plugin per Visual Studio 2012 oppure si può
sperimentare senza installazione
http://www.typescriptlang.org/Playground/
• Implementazione basata su ES6
• Compila in ES5 o ES3
• Funziona il renaming
• DEMO
