1. CSW131 Steven Battilana 1 CSW 131 Free MS Software (DreamSpark / MSDNAA) MS Visual Web Developer (VWD) W3 / Mozilla Code Validators Uploading Your Website with VWD Not Covered or in Book Spring 2013 Prepared by Prof. B. INDEX

2. CSW131 Steven Battilana 2 Download & Install Visual Web Developer (VWD) is a web page and site development and management environment, enabling easy uploads to WCU’s server. Visual Web Developer (VWD) is a web page and site development and management environment, enabling easy uploads to WCU’s server. Just ONE of Microsoft’s program that are similar to Adobe Dreamweaver FREE Microsoft programs available to WCU students currently enrolled in at least one computer science course FREE Microsoft programs available to WCU students currently enrolled in at least one computer science course This program is loaded on the UNA 141 PCs This program is loaded on the UNA 141 PCs Optional: link to download VWD for use on your own PC is on the class website “Hot!” page and slide 9. Optional: link to download VWD for use on your own PC is on the class website “Hot!” page and slide 9.slide 9slide 9 This program requires a Windows OS This program requires a Windows OS If you choose to keep it, you must register the product (free) If you choose to keep it, you must register the product (free) Back to Summary (and Index)

3. CSW131 Steven Battilana 3 Starting the Program & Opening a Web Site Select Start | All Programs | Microsoft Visual Web Developer 2010 Express Edition Select Start | All Programs | Microsoft Visual Web Developer 2010 Express Edition Insert your flash drive Insert your flash drive Click File | Open Web Site… Click File | Open Web Site… Click Class_work folder in your flash drive | Open Click Class_work folder in your flash drive | Open Back to Summary (and Index)

4. CSW131 Steven Battilana 4 Working with a Web Page in a Web Site In Solution Explorer open index.html within ch05 in your Class_work folder In Solution Explorer open index.html within ch05 in your Class_work folder To show line numbers: To show line numbers: click Tools | Options | General, check Line numbers, then click OK Note the color coding: some examples are: Note the color coding: some examples are: selector { property: value; notation / comments general text At the bottom of the VWD screen, click: At the bottom of the VWD screen, click: Split to see both code & WYSIWYG Split to see both code & WYSIWYG Design for WYSIWIG view only Design for WYSIWIG view only An approximation only; testing is still needed! Source for code only Source for code only Try the buttons at the bottom of the screen Try the buttons at the bottom of the screen Back to Summary (and Index)

5. CSW131 Steven Battilana 5 Adding a New Web Page in a Web Site Within Class_work, Chapter 05, click File | New File… Within Class_work, Chapter 05, click File | New File… From Add New Item window select HTML Page, name it test.htm (or test.html – be consistent), then click Add OR Right-click the top level under Solution Explorer, and select Add New Item, then select HTML page From Add New Item window select HTML Page, name it test.htm (or test.html – be consistent), then click Add OR Right-click the top level under Solution Explorer, and select Add New Item, then select HTML page Notice the new page has been added to your folder and the default Source code to start has been inserted. Notice the new page has been added to your folder and the default Source code to start has been inserted. Experiment with this file Experiment with this file When done you can delete it within Solution Explorer When done you can delete it within Solution Explorer Right click test.htm (or test.html) Click Delete Click OK Note: While it is not a default in VWD, we always use UTF-8 encoding. Note: While it is not a default in VWD, we always use UTF-8 encoding. Back to Summary (and Index)

6. CSW131 Steven Battilana 6 Creating a New Web Site Create a folder on your flash drive for websites, e.g., csw131\websites Create a folder on your flash drive for websites, e.g., csw131\websites From within VWD program click File | New Web Site… From within VWD program click File | New Web Site… From New Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET Empty Web Site, name it TestWeb on your flash drive, e.g., CSW131\Websites\TestWeb then click OK From New Web Site window, with Visual Basic highlighted under Installed Templates, select ASP.NET Empty Web Site, name it TestWeb on your flash drive, e.g., CSW131\Websites\TestWeb then click OK You can add new web pages per the previous slide and delete web.config, which is not needed. You can add new web pages per the previous slide and delete web.config, which is not needed. Back to Summary (and Index)

7. CSW131 Steven Battilana 7 Validating Your Code With Mozilla, w3.org has a number a free tools. We can check our web pages for proper (X)HTML code at: With Mozilla, w3.org has a number a free tools. We can check our web pages for proper (X)HTML code at: http://validator.w3.org/ And check for proper CSS code at: http://jigsaw.w3.org/css-validator/ Both of these online validators allow you to check your code 3 ways: Both of these online validators allow you to check your code 3 ways: By URl: for web pages already uploaded to a web server By file upload: for local files on your flash drive or PC By direct input: you can cut and paste your code into validator Using any of the above 3 methods, when you click the “Check” button, errors and warnings (if any) will appear. Using any of the above 3 methods, when you click the “Check” button, errors and warnings (if any) will appear. If errors or significant warnings appear, edit, save and recheck. Note: While it is not a default in VWD, we always use UTF-8 encoding. Note: While it is not a default in VWD, we always use UTF-8 encoding. Back to Summary (and Index)

8. CSW131 Steven Battilana 8 Copying a Web Site to Your WCU Server Location Back to Summary (and Index) 1 2 3 4 5 Within VWD, and E:\csw131\project\ (your web site open), in Solution Explorer (top right of screen), click Copy Web Site icon Within VWD, and E:\csw131\project\ (your web site open), in Solution Explorer (top right of screen), click Copy Web Site icon 1.Click the Connect icon 2.Click the FTP Site icon 3.Server: ftp://fl123456@ roadrunner.cs.wcupa.edu/ e.g., fl is for Fran Lowe followed by a WCU student ID number 4.Username: fl123456 5.Password: fl123456 (may need to be entered twice) Click Open button and MAKE SURE html_public is selected on right Click Open button and MAKE SURE html_public is selected on right Highlight files & folders to upload on left side of screen Highlight files & folders to upload on left side of screen Click right arrow symbol and pages are uploaded Click right arrow symbol and pages are uploaded See web site online (URL): http://roadrunner.cs.wcupa.edu/~fl123456 See web site online (URL): http://roadrunner.cs.wcupa.edu/~fl123456 Note: These uploads may ONLY be done WHEN ON CAMPUS! Note2: Reference UploadingTOSCW131Server.txt (for VWD & WinSCP) Note: These uploads may ONLY be done WHEN ON CAMPUS! Note2: Reference UploadingTOSCW131Server.txt (for VWD & WinSCP)

9. CSW131 Steven Battilana 9 Summary (and Index) WCU CSC students can get free MS software (slide 2). WCU CSC students can get free MS software (slide 2).slide 2slide 2 VWD is a web page and site development and management environment, enabling easy uploads to WCU’s server (slide 2). VWD is a web page and site development and management environment, enabling easy uploads to WCU’s server (slide 2).slide 2slide 2 slide 3 can be downloaded freeslide 3 can be downloaded free VWD is loaded on UNA 141 PCs, is easy to use (slide 3), and can be downloaded free for use on any Windows PC.slide 3can be downloaded free slide 4 slide 4 Coding is color keyed (slide 4)slide 4 slide 4 slide 4 Three coding environments (slide 4) are:slide 4 Source (code only) Design (WYSIWYG) Split (both code & WYSIWYG) WYSIWYG is an estimated appearance: always test! slide 5slide 6 slide 5slide 6 Creating new web pages (slide 5) or websites (slide 6).slide 5slide 6 Validate your XHTML & CSS with W3.org tools (slide 7). Validate your XHTML & CSS with W3.org tools (slide 7).slide 7slide 7 Uploads to WCU’s server are easy (slide 8), but may only be available when on campus. Uploads to WCU’s server are easy (slide 8), but may only be available when on campus.slide 8slide 8