Lab pratico: Visual Studio 2013 Web Tools

di Web Camps Team

Scarica Kit di Formazione di Web Camps

Visual Studio è un ambiente di sviluppo eccellente per . Progetti Windows e Web basati su NET. Include un editor di testo potente che può essere facilmente usato per modificare file autonomi senza un progetto.

Visual Studio gestisce un albero di analisi completo durante la modifica di ogni file. Ciò consente a Visual Studio di fornire azioni senza precedenti di completamento automatico e basate su documenti, rendendo l'esperienza di sviluppo molto più veloce e piacevole. Queste funzionalità sono particolarmente potenti nei documenti HTML e CSS.

Tutta questa potenza è disponibile anche per le estensioni, semplificando l'estensione degli editor con nuove potenti funzionalità in base alle proprie esigenze. Web Essentials è una raccolta di miglioramenti correlati al Web per lo più a Visual Studio. Include numerosi nuovi completamenti IntelliSense (in particolare per CSS), nuove funzionalità di collegamento al browser, JSHint automatico per i file JavaScript, nuovi avvisi per HTML e CSS e molte altre funzionalità essenziali per lo sviluppo Web moderno.

Tutti i frammenti e il codice di esempio sono inclusi nel Web Camp Training Kit, disponibile all'indirizzo https://aka.ms/webcamps-training-kit.

Informazioni generali

Obiettivi

In questo lab pratico si apprenderà come:

• Usare nuove funzionalità dell'editor HTML incluse in Web Essentials, ad esempio frammenti di codice HTML5 avanzati e codifica Zen
• Usare le nuove funzionalità dell'editor CSS incluse in Web Essentials, come il selettore colori e il tooltip matrice browser.
• Usare le nuove funzionalità dell'editor JavaScript incluse in Web Essentials, ad esempio Estrai in file e IntelliSense per tutti gli elementi HTML
• Scambiare dati tra il browser e Visual Studio usando il collegamento al browser

Prerequisiti

Per completare questo lab pratico, è necessario quanto segue:

• Microsoft Visual Studio Professional 2013 o versione successiva
• Web Essentials 2013
• Google Chrome

Setup

Per eseguire gli esercizi in questo lab pratico, è prima necessario configurare l'ambiente.

1. Aprire una finestra di Esplora risorse di Windows e passare alla cartella Origine del lab.
2. Fare clic con il pulsante destro del mouse Setup.cmd e selezionare Esegui come amministratore per avviare il processo di installazione che configurerà l'ambiente e installerà i frammenti di codice di Visual Studio per questo lab.
3. Se viene visualizzata la finestra di dialogo Controllo account utente, confermare l'azione da continuare.

Uso dei frammenti di codice

In tutto il documento del lab verrà richiesto di inserire blocchi di codice. Per praticità, la maggior parte di questo codice viene fornita come frammenti di codice di Visual Studio, a cui è possibile accedere da Visual Studio 2013 per evitare di dover aggiungerlo manualmente.

Esercizi

Questo lab pratico include gli esercizi seguenti:

1. Uso di Browser Link e Web Essentials
2. Sfruttare i frammenti di codice e IntelliSense

Esercizio 1: Lavorare con Browser Link e Web Essentials

Web Essentials è un'estensione di Visual Studio che aggiunge un'ampia gamma di funzionalità utili per lo sviluppo Web moderno, principalmente incentrato su come rendere l'esperienza di sviluppo Web molto più veloce e piacevole. È possibile installare Web Essentials dalla raccolta di estensioni in Visual Studio.

Collegamento al browser è una nuova funzionalità inclusa in Visual Studio 2013 che fornisce un canale tra l'IDE di Visual Studio e qualsiasi browser aperto per lo scambio di dati tra l'applicazione Web e Visual Studio. Web Essentials estende Browser Link con strumenti per modificare il modello a oggetti DOM e gli stili CSS delle pagine Web direttamente dal browser.

In questo esercizio verranno esaminate alcune delle funzionalità supportate da Web Essentials e Browser Link per migliorare una semplice pagina quiz.

Attività 1 - Esecuzione del progetto in più browser

In questa attività si configurerà l'applicazione Web per l'esecuzione in più browser contemporaneamente, utile per i test tra browser.

1. Aprire Microsoft Visual Studio.

2. Nel menu File selezionare Apri | Progetto/Soluzione... e passare a Ex1-WorkingwithBrowserLinkandWebEssentials\Begin nella cartella Source del lab (C:\WebCampsTK\HOL\VSWebTooling\Source). Selezionare Begin.sln e fare clic su Apri.

3. Nella barra degli strumenti di Visual Studio espandere il menu del browser e selezionare Sfoglia con....

   

   Opzione di menu 'Sfoglia con'

4. Nella finestra di dialogo Sfoglia con selezionare Sia Google Chrome che Internet Explorer tenendo premuto CTRL e fare clic su Imposta come predefinito.

   

   Selezione di più browser predefiniti

5. Google Chrome e Internet Explorer dovrebbero ora essere visualizzati come browser predefiniti. Fare clic su Annulla per chiudere la finestra di dialogo.

   

   Google Chrome e Internet Explorer come browser predefiniti

   Annotazioni

   Dopo aver configurato i browser predefiniti, l'opzione Più browser è selezionata nel menu del browser.

   

6. Premere CTRL + F5 per eseguire l'applicazione senza eseguire il debug.

7. Quando entrambe le finestre del browser si aprono, posizionarne una sopra l'altra per visualizzare gli aggiornamenti in entrambi i browser contemporaneamente. I browser devono visualizzare una pagina Web con un rettangolo blu chiaro.

   

   Posizionare un browser sopra l'altro

8. Non chiudere i browser. Verranno usati nell'attività successiva.

Attività 2 - Uso della codifica Zen per creare elementi HTML

Zen Coding è un plug-in dell'editor per la codifica e la modifica di codice HTML, XML, XSL (o qualsiasi altro formato di codice strutturato). Il core di questo plug-in è un potente motore di abbreviazioni che consente di espandere le espressioni -similar ai selettori CSS- nel codice HTML. Zen Coding è un modo rapido per scrivere codice HTML usando una sintassi del selettore di stile CSS.

In questo esercizio si userà la funzionalità Zen Coding fornita da Web Essentials per generare i pulsanti HTML che rappresentano le opzioni della domanda.

1. Tornare a Visual Studio.

2. Aprire il file Index.cshtml che si trova nella cartella Views | Home .

3. Sostituire il <!-- TODO: aggiungere le opzioni qui --> commento con il seguente codice e premere TAB.

   button.btn.btn-info.btn-lg.option{Answer $}*4
   

4. Il codice deve essere espanso in HTML.

   

   HTML espanso

   Annotazioni

   Per altre informazioni sulla sintassi di Zen Coding, vedere l'articolo seguente.

5. Fare clic sul pulsante Aggiorna browser collegati per aggiornare entrambi i browser.

   

   Aggiornare i browser collegati

   

   Internet Explorer - Pagina aggiornata con quattro pulsanti

   

   Google Chrome - Pagina aggiornata con quattro pulsanti

6. Tornare a Visual Studio.

7. Sono stati aggiunti i pulsanti alla pagina, ma è comunque necessario aggiungere una domanda sul modello. A tale scopo, si userà una nuova funzionalità in Web Essentials denominata generatore Lorem Ipsum. Individuare l'elemento div con l'attributo di classefront.

8. Aggiungere il codice seguente come primo elemento figlio del div e premere TAB.

   p.lead>lorem5
   

9. Il codice deve essere espanso in HTML.

   

   Lorem Ipsum generato automaticamente

   Annotazioni

   All'interno di Zen Coding, ora puoi generare direttamente il codice Lorem Ipsum nell'editor HTML. È sufficiente digitare il lorem e premere TAB e verrà inserito un testo Lorem Ipsum di 30 parole. Ad esempio , lorem10 inserisce 10 parole Lorem Ipsum.

10. Si aggiungerà un logo nella parte superiore della domanda usando un'altra nuova funzionalità in Web Essentials denominata generatore Lorem Pixel. Aggiungere il codice seguente come primo elemento figlio dell'elemento div con contenitore come valore della classe e premere TAB.

    div.row.header>pix-436x185-abstract
    

11. Il codice deve essere espanso in HTML.

    

    Lorem Pixel generato automaticamente

    Annotazioni

    Come parte di Zen Coding, è anche possibile generare codice Lorem Pixel direttamente nell'editor HTML. Digitare semplicemente pix-200x200-animali e premere TAB e un tag img con un'immagine 200x200 di un animale verrà inserito.

12. Fare clic sul pulsante Aggiorna browser collegati per aggiornare entrambi i browser.

    

    Internet Explorer - Immagine e testo generati automaticamente

    

    Google Chrome - Immagine e testo generati automaticamente

    Annotazioni

    Poiché l'immagine viene selezionata in modo casuale quando si aggiunge il frammento di codice, l'immagine mostrata nei browser può differire.

13. Non chiudere i browser. Verranno usati nell'attività successiva.

Attività 3 - Aggiornamento di una proprietà dello stile

In questa attività si userà la funzionalità Modalità ispezione collegamento browser per rilevare la posizione esatta in cui viene generato l'elemento DOM specifico e quindi aggiornare la proprietà colore di tale elemento usando una selezione colori fornita da Web Essentials.

1. Nel browser Internet Explorer premere CTRL + ALT + per abilitare la modalità di ispezione.

2. Spostare il puntatore sul bordo blu chiaro e fare clic.

   

   Spostamento del puntatore sul bordo blu chiaro

3. Tornare a Visual Studio. Si noti che l'elemento HTML selezionato nel browser è selezionato anche nell'editor HTML di Visual Studio.

   

   Elemento HTML selezionato nell'editor HTML di Visual Studio

4. Si aggiornerà ora la classe CSS iniziale per modificare lo stile dell'elemento selezionato. A tale scopo, premere CTRL + per aprire la casella di ricerca Passa a. Digitare site.css e premere INVIO per aprire il file.

   

   Apertura del file Site.css

5. Premere CTRL + F e digitare .flip-container .front per trovare il selettore CSS.

6. Fare clic sul quadrato blu chiaro nella proprietà del bordo della classe per aprire il Selettore Colore.

   

   Apertura della selezione colori

7. Espandi la selezione dei colori facendo clic sul pulsante a freccia e seleziona un nuovo colore.

   

   Espansione della selezione colori

8. Premere CTRL + ALT + INVIO per aggiornare i browser collegati.

9. Passare a Internet Explorer e notare come il colore del bordo è cambiato.

   

   Internet Explorer - Colore bordo aggiornato

10. Passare a Google Chrome e notare come il colore del bordo è cambiato.

    

    Google Chrome - Colore bordo aggiornato

11. Tornare a Visual Studio.

12. Passare alla fine del file Site.css e premere CTRL + F per individuare il selettore btn .

13. Si noti che la proprietà -webkit-border-radius è sottolineata in verde.

    

    Proprietà del selettore btn -webkit-border-radius

14. Posiziona il cursore nella proprietà -webkit-border-radius. Una linea blu dovrebbe essere visualizzata sotto la prima lettera della prima parola della proprietà . Questo è lo smart tag.

15. Premere CTRL + . per aprire il menu dei suggerimenti e fare clic su Aggiungi proprietà standard mancante (raggio bordo).

    

    Aggiungere un suggerimento per la proprietà standard mancante

16. La proprietà border-radius viene aggiunta automaticamente alla regola CSS.

    

    Proprietà standard mancante aggiunta

17. Sposta il puntatore sulla proprietà border-radius per visualizzare il tooltip matrice del browser. La tooltip Matrice browser mostra la disponibilità della proprietà in ogni browser.

    

    Suggerimento matrice browser

18. Si noti che il valore della proprietà border-radius è ancora sottolineato. Spostare il puntatore sul valore per visualizzare il messaggio di avviso.

    

    Avviso del valore della proprietà border-radius

19. Rimuovere l'unità del valore della proprietà border-radius come suggerito dal tooltip.

20. Poiché il raggio del bordo è la proprietà standard per definire il modo in cui sono arrotondati gli angoli del bordo, è possibile rimuovere la proprietà -webkit-border-radius e il valore dalla regola CSS.

21. Posizionare il cursore nella proprietà word-wrap e notare che lo smart tag viene visualizzato anche di seguito.

22. Aprire il menu e fare clic su Aggiungi specifiche del fornitore mancanti.

    

    Aggiungere un suggerimento per le specifiche del fornitore mancanti

23. La proprietà -ms-word-wrap viene aggiunta automaticamente alla regola CSS.

    

    Aggiunta di una proprietà specifica del fornitore

Attività 4 - Aggiornamento del codice HTML dal browser

In questa attività, si utilizzerà la funzionalità Modalità progettazione del Browser Link per modificare l'oggetto DOM dal browser e trasferire le modifiche al file sorgente HTML in Visual Studio.

1. In Google Chrome premere CTRL + ALT + D per abilitare la modalità progettazione.

2. Sposta il puntatore sull'etichetta Lorem Ipsum dolor sit amet e fai clic.

   

   Modifica della domanda

3. Dovrebbe essere visualizzato un cursore. Sostituire il testo originale con Cosa si vede quando scrivo una domanda più lunga? e poi premi ESC per uscire dalla modalità progettazione.

   

   Domanda modificata

4. Tornare a Visual Studio e aprire Index.cshtml, se non è già aperto. Si noti che il testo interno dell'elemento <p> è stato aggiornato.

   

   Domanda aggiornata nella pagina HTML

Attività 5 - Revisione degli avvisi correlati a SEO

L'ottimizzazione del motore di ricerca (SEO) è il processo di aumentare la classificazione di un sito Web nell'elenco dei risultati di un motore di ricerca. Maggiore è il posizionamento del sito e più viene elencato in modo coerente nei risultati del motore di ricerca, più visitatori il sito otterrà da quel motore di ricerca. Web Essentials incorpora uno strumento analitico che esamina il codice HTML, segnala i problemi rilevati e fornisce assistenza per risolverli.

1. Passare al menu Visualizza e fare clic su Elenco errori per aprire la finestra Elenco errori .

   

   Elenco errori nel menu Visualizza

2. Si noti che è presente un avviso SEO che informa che manca un <meta> tag per la descrizione della pagina. Fare doppio clic sulla voce di avviso SEO per correggerla.

   

   Finestra Elenco errori

3. Nella finestra di dialogo Web Essentials fare clic su Sì per inserire un meta< tag di descrizione>.

   

   Finestra di dialogo Informazioni di base Web

4. Viene aperto l'editor per _Layout.cshtml e il <meta> tag viene aggiunto automaticamente alla sezione head del file HTML.

   

   Meta tag aggiunto automaticamente alla pagina _Layout

5. Modificare il valore dell'attributo content in GeekQuiz e salvare il file.

Esercizio 2: Sfruttare i frammenti di codice e IntelliSense

Con Web Essentials, l'editor HTML è stato esteso con funzionalità aggiuntive. In questo esercizio verranno visualizzate alcune nuove funzionalità utili per lo sviluppo di applicazioni Web.

Attività 1 - Uso di IntelliSense nei documenti HTML

La prima nuova funzionalità visualizzata in questa attività è denominata Dynamic IntelliSense. IntelliSense dinamico legge altri tag e attributi per dedurre i possibili id che utilizzerai.

In questa attività verrà creato un nuovo elemento del modulo HTML che contiene un'etichetta e un campo di input. Si aggiungerà quindi un attributo for all'etichetta per associarlo all'input e verranno visualizzati i suggerimenti di IntelliSense in base agli ID degli input nel contesto.

1. Aprire Visual Studio Express 2013 per Web e la soluzione Begin.sln disponibile nella cartella Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin . In alternativa, è possibile continuare con la soluzione ottenuta nell'esercizio precedente.

2. In Esplora soluzioni aprire il file Index.cshtml che si trova nella cartella Visualizzazioni | home .

3. Aggiungere il modulo seguente all'interno dell'elemento <section> .

   (Frammento di codice - VisualStudio2013WebTooling - Ex2 - Form)

   <form>
        <input type="text" id="name" />
   </form>
   

4. Il tag di input deve essere preceduto da un'etichetta con una descrizione del campo. Aggiungere l'etichetta seguente prima del tag di input.

   <form>
       <label id="name">Name</label>       
       <input type="text" id="name" />
   </form>
   

5. L'attributo for di un'etichetta<> specifica l'elemento form a cui è associata un'etichetta. Il valore dell'attributo deve essere uguale all'ID dell'elemento correlato. Aggiungere l'attributo for all'elemento <label> . Come mostrato nella figura seguente, il valore "name" viene visualizzato nella finestra di IntelliSense, in base all'ID degli elementi all'interno dello stesso ambito (il form di inclusione<>).

   

   Visualizzazione dell'ID in IntelliSense

6. Eliminare l'elemento <form> aggiunto di recente e il relativo contenuto.

Attività 2 - Uso di frammenti di codice HTML

HTML5 ha introdotto più di 25 nuovi tag semantici. Visual Studio dispone già del supporto di IntelliSense per questi tag, ma Visual Studio 2013 semplifica la scrittura di markup aggiungendo nuovi frammenti di codice. Anche se questi tag non sono complicati, sono dotati di alcune piccole sottigliezze, ad esempio aggiungendo i fallback codec corretti per il tag audio . In questa attività verranno visualizzati i frammenti di codice HTML per il tag audio.

1. Nel file Index.cshtml digitare <aud all'interno dell'elemento <della sezione> , come illustrato nella figura seguente.

   

   Inserimento di un elemento audio

2. Premere TAB due volte e notare come il codice seguente viene aggiunto nella pagina e il cursore viene posizionato sull'attributo src della prima origine.

   <audio controls="controls">
        <source src="file.mp3" type="audio/mp3" />
        <source src="file.ogg" type="audio/ogg" />
   </audio>
   

   Annotazioni

   Premendo il tasto TAB due volte, viene inserito il frammento di codice. Il frammento audio mostra l'utilizzo standard del tag audio , con due file di origine per un supporto migliorato.

3. Eliminare la seconda riga e aggiornare l'origine della prima riga con il collegamento seguente alla mostra Installazione di ASP.NET e Strumenti Web : https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Il codice risultante è illustrato di seguito.

   <audio controls="controls">
        <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
   </audio>
   

   Annotazioni

   Il file di origine viene usato come esempio. Se si preferisce, è possibile usare un'altra origine.

4. Premere CTRL + S per salvare il file.

5. Premere CTRL + F5 per avviare l'applicazione.

6. Si noti che un lettore audio è stato aggiunto all'applicazione.

   

   Lettore audio in Internet Explorer

   

   Lettore audio in Google Chrome

7. Non chiudere i browser. Verranno usati nell'attività successiva.

Attività 3 - Uso di IntelliSense nei documenti JavaScript

Con Web Essentials 2013, i fogli di stile e le pagine HTML producono un elenco di ID e nomi di classe. In questa attività si apprenderà come questi elenchi migliorano il supporto di JavaScript IntelliSense in Web Essentials 2013.

1. Nel file Index.cshtml aggiungere il codice seguente per definire un tag script per il codice JavaScript.

   ...
   </section>
   @section scripts{
       <script type="text/javascript">
   
       </script>
   }
   

2. Aggiungere il codice seguente all'interno del tag script per definire la funzione di callback pronta.

   (Frammento di codice - VisualStudio2013WebTooling - Ex2 - ReadyFunction)

   (function () {
       $(document).ready(function () {
   
       });
   }());
   

3. Posizionare il cursore nel tag script e premere CTRL + per aprire il menu dei suggerimenti.

4. Fare clic su Estrai nel file.

   

   Suggerimento per l'estrazione di JavaScript nel file

5. Nella finestra Salva con nome selezionare la cartella Scripts , denominare il file init.js e fare clic su Salva.

   

   Finestra Salva con nome

   Annotazioni

   Il fileinit.js viene creato e il contenuto dello script viene spostato nel file.

   

   Init.js file creato con il contenuto incluso

6. Aprire il file Index.cshtml e verificare che il tag di script sia stato sostituito con un riferimento al file init.js .

   

   Riferimento html Init.js

7. Passare a Esplora soluzioni e notare che il file init.js è stato incluso automaticamente nella soluzione.

   

   Init.js file incluso nella soluzione

8. Tornare al file init.js per aggiornare il callback della funzione ready.

9. All'interno della definizione di callback della funzione passata a ready aggiungere il codice seguente per ottenere tutti gli elementi da un attributo di classe specifico.

   (function () {
        $(document).ready(function () {
             document.getElementsByClassName("")
        });
   }());
   

10. Premere CTRL + SPACE tra le virgolette all'interno della chiamata di funzione getElementsByClassName .

    

    Visualizzazione di IntelliSense per la funzione getElementsByClassName

    Annotazioni

    Si noti che IntelliSense mostra le classi definite nei fogli di stile del progetto.

11. Sostituire la riga creata con il codice seguente.

    (function () {
         $(document).ready(function () {
              var audioElements = document.getElementsByTagName("au");
         });
    }());
    

12. Posizionare il cursore dopo au all'interno delle virgolette nella funzione getElementsByTagName e premere CTRL + SPACE.

    

    Visualizzazione di IntelliSense per il metodo getElementsByTagName

13. Selezionare "audio" nell'elenco e premere INVIO. Il risultato è illustrato nella figura seguente.

    

    Recupero di elementi audio

14. In Esplora Soluzioni, clic con il tasto destro su init.js nella cartella Scripts e seleziona Comprimi file JavaScript dal menu Web Essentials.

    

    Minimizza i file JavaScript

15. Quando viene richiesto di abilitare la minificazione automatica quando il file di origine cambia, fare clic su Sì.

    

    Abilitazione dell'avviso di minimizzazione automatica

    Annotazioni

    Il init.min.js viene creato e viene aggiunto come dipendenza del file diinit.js .

    

    Init.min.js file creato

16. Aprire il file init.min.js e notare che il file viene minimizzato.

    

    Init.min.js contenuto del file

17. Nel fileinit.js aggiungere il codice seguente sotto la chiamata di funzione getElementsByTagName per riprodurre tutti gli elementi audio.

    (Frammento di codice - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

    var len = audioElements.length;
    for (var i = 0; i < len; i++) {
        audioElements[i].play();
    }
    

18. Fare clic su CTRL + S per salvare il file. Poiché il file minimizzato è già aperto, verrà visualizzata una finestra di dialogo che indica che il file è stato modificato all'esterno dell'editor di origine. Fare clic su Sì.

    

    Avviso di Microsoft Visual Studio

19. Tornare al file init.min.js per verificare che il file sia stato aggiornato con il nuovo codice.

    

    Init.min.js file aggiornato

20. Fare clic sul pulsante Browser Link Refresh (Aggiorna collegamento browser ).

21. Una volta aggiornati entrambi i browser, i lettori audio visualizzati nell'attività precedente inizieranno a riprodursi automaticamente.

    

    Lettore audio incluso nella visualizzazione

Sommario

Completando questo lab pratico si è appreso come:

• Usare nuove funzionalità dell'editor HTML incluse in Web Essentials, ad esempio frammenti di codice HTML5 avanzati e codifica Zen
• Usare le nuove funzionalità dell'editor CSS incluse in Web Essentials, come il selettore colori e il tooltip matrice browser.
• Usare le nuove funzionalità dell'editor JavaScript incluse in Web Essentials, ad esempio Estrai in file e IntelliSense per tutti gli elementi HTML
• Scambiare dati tra il browser e Visual Studio usando il collegamento al browser