Il presente articolo è stato tradotto automaticamente.

Visual Studio 2012

Novità per lo sviluppo Web in Visual Studio 2012

Clark Sell

 

Vi ricordate il primo sito Web è sviluppato? Faccio sicuro, e oh ragazzo che Casino che è stato. Ma molto è cambiato da allora, e non si ferma! È sempre più difficile e più difficile da ricordare ciò che lo sviluppo Web era come un anno fa, lascia solo quando Microsoft .net Framework è stato rilasciato.

Visual Studio si è evoluto come bene. Ricordate quando gli sviluppatori Web fondamentalmente dovevano installare un server completo come un rig sviluppatore solo per avere IIS e SQL Server per eseguire i loro siti? Poi siamo stati introdotti al mondo più leggero di Cassini e poi IIS Express. Ora HTML5 è qui e Visual Studio lo abbraccia.

Ho intenzione di esplorare come Visual Studio supporta questo sviluppatore Web di nuovo mondo, con un'occhiata alle nuove funzionalità interessanti come il progetto di condivisione, Page Inspector e DOM Explorer, come pure un'occhiata a come il nucleo di editing esperienza continua ad evolversi.

Progetto di condivisione

Si potrebbe notare la nuova funzionalità di Visual Studio con il primo click del mouse, quando si apre un file di progetto. In passato, i file di progetto dipendevano direttamente l'editor utilizzato. Ciò significava che se si ha un file di progetto creato con Visual Studio 2010 e provato ad aprirlo con Visual Studio 2012, avrebbe chiesto di aggiornarlo. Una volta che fatto, si potrebbe aprire il progetto mai più la versione precedente. Bene, ora non più.

Visual Studio 2012 release candidate (RC) ha introdotto il concetto di condivisione del progetto. Ora è possibile utilizzare esso indifferentemente con Visual Studio 2010 SP1 sulla stessa origine. Eliminando il requisito che tutti devono utilizzare lo stesso setup apre le porte a nuove esperienze, specialmente su diverse squadre e progetti open source — o anche durante gli aggiornamenti del software nel vostro negozio di sviluppo.

Naturalmente, ci sono alcune considerazioni. Ad esempio, se il progetto utilizza un database locale (la cartella App_Data), è necessario assicurarsi che si sta ancora utilizzando la stessa versione del motore di database. Ci sono anche alcuni vecchi tipi di progetto, come ASP.NET MVC 2, che non funzionerà con questo.

Come con qualcosa di nuovo, ti consigliamo di creare una forcella e fare alcune prove di concetto. L'ultima cosa che si desidera farsi fare è rompere il processo di compilazione.

Supporto HTML5

Probabilmente la caratteristica più significativa per essere aggiunto all'editor HTML in Visual Studio è la Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) di supporto. WAI-ARIA (w3.org/WAI/intro/aria) è uno standard Web focalizzato sul fare siti Web e applicazioni Web più accessibile alle persone con disabilità. La specifica definisce due tipi di attributi per il markup. Ruoli vengono applicati agli elementi HTML per descrivere il tipo di widget viene utilizzato o la struttura della pagina Web. Come si può vedere Figura 1, supporto di Visual Studio per ruoli ARIA comprende IntelliSense.

Figura 1 ARIA Roles

L'altro tipo di attributi sono premessi con aria-, come occupato da aria o aria-valuemin, come mostrato Figura 2. Questi aria-* gli attributi sono usati per aiutare a descrivere l'elemento a un utente.

Figura 2 ARIA-* proprietà

HTML5 ha introdotto più di 25 nuovi tag semantici. Visual Studio aveva già il supporto IntelliSense per questi tag, ma Visual Studio 2012 rende più veloce e più facile da scrivere markup aggiungendo alcuni frammenti corrispondenti, come quelle per i tag audio e video. Figura 3 Mostra un frammento di codice per il tag video. Anche se questi tag non sono complicati, sono dotati di alcune piccole sottigliezze, ad esempio aggiungendo il fallback codec corretto.

Frammento di figura 3 per l'elemento Video

L'ultimo pochi siti Web che costruito hanno approfittato dei nuovi tag HTML5. Con ciascuno di questi siti, ho finito per refactoring mio markup in qualche modo, anche se era solo un cambiamento semantico semplice, come ad esempio cambiare un div a una sezione. In Visual Studio 2012, quando si modifica un elemento, l'editor cambierà anche il corrispondente di inizio o fine elemento. Questa ridenominazione automatica è un altro modo l'editor consente di evitare quegli errori fino a tarda notte.

Gli sviluppatori spesso differiscono da sopra se utilizzare tabulazioni o spazi per la formattazione. Non importa che si preferisce, trattino Smart è qui per mantenere coerente. Indipendentemente dalla vostra scelta, dopo che digitando un elemento e premendo enter, si è portato alla riga successiva, che è rientrata come si preferisce.Come ci aspetterebbe, ha aggiunto IntelliSense non solo come tipo ma anche basato sul caso titolo delle parole nelle vostre ricerche, rendendo più veloce e più facile per inserire elementi di filtraggio. E quando combinato con trattino Smart, non importa dove si rilascia il cursore, dopo aver colpito la scheda nuovo markup verrà automaticamente posizionato correttamente nel documento, come Figura 4 illustrato.

Figura 4 il filtro intelligente e rientro

Infine, l'editor di Visual Studio 2012 HTML ha un certo numero di aggiunte grande che supportano ASP, ad esempio attività Smart, estrarre il controllo utente e l'associazione automatica degli eventi. Potete trovare maggiori informazioni su queste funzionalità nella pagina "Che cosa è nuovo in ASP.NET 4.5 e Visual Studio 2012" a bit.ly/MXcIbG.

Supporto JavaScript

L'editor JavaScript in Visual Studio 2012 è completamente nuova e supporta ECMAScript 5. Esso porta alcune caratteristiche piacevoli come crollando funzioni e corrispondenza parentesi graffe. E se sta ancora scorrendo intorno per una funzione, non. Basta premere F12 e ottenere preso direttamente alla definizione di tale funzione o variabile (vedere Figura 5).

Figura 5 l'Editor JavaScript

L'editor anche migliora IntelliSense per sviluppo JavaScript e, insieme ad essa, migliorato il supporto per il modello DOM (Document Object). Con HTML5 diventando mainstream, è bello avere questo supporto avanzato non solo per le nuove API DOM di base ma anche quando si decide di estendere la loro, come Figura 6 illustrato.

Figura 6 IntelliSense per JavaScript

La documentazione è sempre una buona cosa avere, soprattutto quando è il tipo di documentazione che vive nella finestra di IntelliSense. VSDoc supporto non è una novità di Visual Studio, ma ora include un nuovo elemento di firma per la dichiarazione di overload di funzioni JavaScript che consentono di creare commenti dettagliati di IntelliSense. Ignorando la mia qualità di codice per un secondo, date un'occhiata a Figura 7, che mostra una funzione che prende due o tre argomenti. Come si può vedere, il codice ha una serie di <signatures> per ogni overload, con i risultati mostrati Figura 8.

Figura 7 funzione di JavaScript che utilizza l'elemento di firma

function myAwesomeFunction(a, b, c) {
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <returns type="String" />
    /// </signature>
    /// <signature>
    ///   <summary>This is my awesome function</summary>
    ///   <param name="a" type="String">Clearly you should pass A in here.</param>
    ///   <param name="b" type="String">Clearly you should pass B in here.</param>
    ///   <param name="c" type="String">Clearly you should pass C in here.</param>
    ///   <returns type="String" />
    /// </signature>
    return "yea pretty awesome";
  }

Figura 8 commenti aggiunti a IntelliSense

Con quel semplice documentazione sul posto si può vedere in Figura 8 come IntelliSense utilizzato per il contenuto visualizzato.

Supporto CSS3

Per me, CSS continua ad essere un'arte mistica, e mai uno che posso ottenere sufficiente aiuto con. Per fortuna, Visual Studio 2012 ha migliorato il supporto per i CSS. Regioni, IntelliSense e frammenti sono solo alcune caratteristiche che possono aiutare a migliorare il vostro stile. Cominciamo guardando alle regioni. Tutto quello che serve è un commento speciale per creare una regione. Figura 9 Mostra una regione semplice sia espanso e compresso per lo styling di una tabella.

Figura 9 regioni

Come sapete, nel mondo del Web è necessario supportare più browser. Con i CSS, che significa contabilità per tutti i prefissi diversi vendor. L'editor di Visual Studio 2012 CSS ora include i prefissi vendor in entrambi l'elenco standard di proprietà e anche in frammenti incorporati, come mostrato Figura 10.

Figura 10 proprietà per il fornitore il prefisso - moz

Naturalmente, ci sono molte proprietà CSS a vostra disposizione e filtraggio è essenziale. Come con IntelliSense per c# e Visual Basic, è possibile filtrare quel lungo elenco di proprietà CSS solo digitando, come Figura 11 illustrato nella ricerca di borr (border-radius).

Figura 11 CSS IntelliSense

Questo è grande, ma per border-radius si dovrebbe davvero sostenere tutti i prefissi di fornitore. Se guardate attentamente l'icona border-radius, vedrete che è in realtà un frammento. Ha colpito due volte, la scheda una volta a completamento automatico la proprietà e di nuovo per inserire il frammento (vedere Figura 12).

Figura 12 Snippet CSS

Si può vedere che tutti i prefissi di fornitore sono stati aggiunti e il valore è evidenziato per cambiare. Come si digita il valore desiderato per il raggio, tutti i valori specifici del fornitore cambierà di conseguenza. Ma che dire qualcosa di più avanzato, come una query di media? Digitare e vedrai un elenco di frammenti avanzati quali @ media. Select @ media poi premete tab e verrà inserito il frammento di query di media. Ora è possibile digitare solo nella tua nuova larghezza, premere tab e regolare l'altezza (vedere Figura 13).

@media Snippet" />
Figura 13 il frammento @ media

I frammenti sono un fantastico modo per risparmiare sui tasti. Proprio come in c# o Visual Basic, è possibile creare nuovi frammenti o modificare quelle esistenti tramite Visual Studio Gestione frammenti di codice, che troverete a strumenti | Gestione frammenti di codice.

Visual Studio ha anche un nuovo color picker per quelle proprietà che necessitano di colore; sostituisce i colori utilizzati nelle versioni precedenti. Come si può vedere Figura 14, ho deciso di scegliere un colore con un po' di trasparenza, quindi il selettore colore cambiato da un colore standard esagonale a rgba.

Figura 14 il nuovo CSS Color Picker

Infine, essere sicuri di controllare il supporto per rientro gerarchica e CSS hack in bit.ly/MXcIbG.

Debug con impostazioni pagina

"Ehi, funziona sulla mia macchina!" Garantisco che hai detto quella frase o sentito più di una volta durante la tua carriera. In sviluppo Web, è quasi garantito che si sente la che frase che prima o poi e perché è quello? Beh, in parte è perché abbiamo distribuire e sviluppiamo su non sono identici.

Lasciando da parte le cose ovvie come sicurezza e server farms, si tratta veramente basso per quello che il browser sarà eseguire ed eseguire il rendering. Nel corso degli anni, sono avanzate tecnologie come HTML5, CSS3 e JavaScript, e utilizziamo una vasta gamma di strutture, tra cui alcuni che potrebbero eseguire sempre e solo il browser (ad esempio knockout.js e backbone). Gli sviluppatori Web hanno a che fare con due mondi diversi: come l'app è sviluppata e come funziona in tutti i browser differenti che devono essere supportati.

Strumenti del browser sono avanzate di conseguenza, che aiuta un grande affare, ma ancora potrebbe essere necessario uno scavo archeologico a trovare il file di origine originale. Anche se si considera la semplice riduzione di JavaScript e caricatori di script, che cosa potrebbe essere inviata al server potrebbe essere drasticamente diversa da quello che tu hai sviluppato. Per fortuna, Page Inspector, uno dei miei preferite aggiunte a Visual Studio 2012, è qui per aiutarti. Page Inspector porta strumenti di diagnostica browser direttamente in Visual Studio. Così facendo, esso offre un'esperienza integrata dal browser per ASP.NET e diritto al codice sorgente. Fa tutto questo con l'installazione minima.

È possibile eseguire Page Inspector, fuori dalla scatola con funzionalità limitate. Per farlo, basta clic destro sulla pagina che si desidera visualizzare e selezionare View Page Inspector. Ora, so cosa stai pensando: "Non c'è modo che funzionerà sul mio progetto MVC o con tutti i miei itinerari personalizzati." Avere una fede.

Page Inspector farà del suo meglio per mappa effettivamente il file della convenzione URL utilizzato. Dove non riesce, è possibile aggiungere manualmente tale mapping. Per attivare completamente Page Inspector e tutte le sue caratteristiche, basta aggiungere una nuova chiave a sezione appSettings del file Web. config:

<add key="VisualStudioDesignTime:Enabled" value="true" />

Page Inspector è tutto collegando che "gap" accennato in precedenza, tra ciò che è stato sviluppato e ciò che è stato eseguito il rendering. Sarebbe bello se si potrebbe evidenziare qualcosa nell'output del rendering e trovare quale file è in — o, meglio ancora, cambiarlo? So che si può fare già negli strumenti del browser, ma voglio dire per il bene, in realtà la fonte da che è venuto. Con Page Inspector si può fare questo, come esegue il mapping tra l'output di rendering e i file di origine da che è venuto. Quando si avvia Page Inspector, fondamentalmente si è presentato con una finestra del browser all'interno di Visual Studio, come mostrato Figura 15.

Ispettore Pagina figura 15

C'è un sacco succedendo qui, ma cerchiamo di abbattere:

• Il cromo della finestra è un frame del browser. Si può vedere la barra degli indirizzi in alto.
• La metà superiore della pagina è la pagina Web effettiva come il rendering nel browser.
• Basso a sinistra è il codice HTML per la pagina di rendering. Questo è perché l'HTML è stato selezionato nella scheda soprastante.
• Basso a destra è lo stile della pagina renderizzata.

Simile agli strumenti trovati nel browser, c'è una caratteristica denominata ispezionare. Quando si seleziona ispezionare, come ci si sposta intorno alla pagina vedrai i diversi elementi del DOM evidenziato ed etichettato. In Figura 15, l'elemento è hgroup con una classe denominata titolo. Vedrete anche nella finestra HTML markup corrispondente evidenziato. Questo accade in tempo reale come si sposta tutto il documento. Come se questo non fosse abbastanza fresco, dare un'occhiata a Figura 16. Ho selezionato o aleggiava un elemento Page Inspector e dietro di esso si può vedere che è evidenziato nel file sorgente corretta dove risiede quel testo. Questo non accade solo a livello di elemento, ma tutto il senso giù per carattere. È un live mapping carattere per carattere, bidirezionale dall'origine all'output del rendering. Indipendentemente da ciò che si seleziona (fonte o per eseguire il rendering), lo vedrai evidenziato.

Figura 16 Mapping tra sorgente e per eseguire il rendering

Io ho appena scalfito la superficie delle funzionalità di Page Inspector. Questa è una di quelle caratteristiche che avete bisogno di utilizzare per apprezzare appieno quanto può rendere la vita più facile. Preparatevi ad essere stupiti. La prossima volta che sei in un progetto Web, fare clic destro su una pagina e selezionare View Page Inspector.

Editrice

Cosa buona è un sito Web se non è possibile distribuirlo? Visual Studio ha avuto per lungo tempo il supporto per la distribuzione di siti, tra cui una caratteristica denominata pubblicare il profilo. Storicamente, una volta che è stato creato un profilo era solo una risorsa locale macchina. In Visual Studio 2012, questo profilo è ora parte del patrimonio complessivo di progetto. È un semplice file di MSBuild, sarà ottenere importato nella vostra catena globale di MSBuild. Ecco un semplice profilo FTP potrebbe sembrare:

<Project ToolsVersion="4.0"
  xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <WebPublishMethod>FTP</WebPublishMethod>
    <SiteUrlToLaunchAfterPublish>http://thatconference.com
      </SiteUrlToLaunchAfterPublish>
    <publishUrl>ftp://thatConference.com</publishUrl>
    <DeleteExistingFiles>True</DeleteExistingFiles>
    <FtpPassiveMode>True</FtpPassiveMode>
    <UserName>foooooo</UserName>
    <_SavePWD>True</_SavePWD>
  </PropertyGroup>
</Project>

Potete trovare questi profili salvati nelle cartelle di proprietà progetto complessivo:

• C# — Properties\PublishProfiles
• Visual Basic — MyProject\PublishProfiles

Perché è un file di progetto MSBuild, naturalmente si può chiamare da linea di comando, in questo modo:

MSBuild MyProject. csproj /t:WebPublish /p:PublishProfile = ProfileName

HTML5 su Windows 8

Alla conferenza di costruire l'anno scorso, Microsoft ha annunciato un nuovo modello di programmazione per la creazione di applicazioni native su Windows 8. Non come si è scoperto, questo nuovo modello di programmazione è veramente nuovo a tutti; parte della storia di sviluppo è semplicemente un nuovo affidamento su HTML5, CSS3 e JavaScript per creare applicazioni. Questo significa che chiunque con un background di sviluppo Web ha un'abilità applicabile per la scrittura di applicazioni native per Windows 8. Naturalmente, Visual Studio è lì per aiutare.

Un certo numero di core editing miglioramenti ho qui discussi sono ancora applicabili per lo sviluppo di applicazioni Windows Store, con l'eccezione di Page Inspector (perché Windows Store apps non eseguito in un browser). Come, allora, si debug di applicazioni HTML5 Windows Store? Con l'esploratore di DOM e la JavaScript Console, come illustrato nel Figura 17.

Figura 17 l'esploratore DOM

Come con Page Inspector, è possibile selezionare gli elementi da applicazione in esecuzione e andare direttamente alla posizione nell'origine. È possibile vedere gli stili applicati e modificare i valori, mentre l'applicazione è in esecuzione. Vuoi mettere un punto di interruzione in alcuni JavaScript? Andare avanti, e poi alcuni live debug. Si può anche avviare la JavaScript Console e start hacking in giro. Indipendentemente dal fatto se si sta costruendo un sito Web o un'applicazione per Windows 8, è lo stesso, con le stesse caratteristiche attraverso entrambe le piattaforme in un grande editore.

Se stai leggendo questo, le probabilità sono abbastanza buone che si utilizza Visual Studio. L'ho usato io stesso per più di un decennio e ho imparato con ogni major release che è buono ricordare a te stesso per esplorare tutte le nuove caratteristiche. È troppo facile a volte solo bastone con ciò che già sai, quindi Vai e curiosare. È bello vedere Visual Studio abbracciare tecnologie correnti come HTML5, CSS3 ed ECMAScript 5, mentre mettendo strutture sul posto per l'aggiornamento come modificare gli standard.

Clark Sell funziona come un senior evangelist Web e Windows 8 di Microsoft di fuori di Chicago. Ha Blog at csell.net, podcast al DeveloperSmackdown.com e può essere trovato su Twitter a twitter.com/csell5.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Matt Carter e Orville McDonald