WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310

Size: px

Start display at page:

Download "WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310"

Alaina Miles
6 years ago
Views:

1 WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great resource is: Overall responsive design is your html page responding to the size of the device that is displaying the page and changing the order/width of the items to be best viewed on that page. Thus, a page may look good on a monitor, tablet or smart device. Keys to responsive design are style sheets as well as a new term media queries. Think of a media query is a question to your browser that checks the size of the screen that revises the size/appearance/order of items based on the size of the screen Bootstrap is an enhancement on the basic responsive design concept as it is a series of jquery libraries and style pages that make your job even easier, you would link to the bootstrap.js and.css files like we have done in prior projects. Bootstrap was originally created by Twitter to work easier on mobile devices A. Basic steps to using Bootstrap in a web site Overall, the concepts are the same as what we have done in the past, build links to the style sheets for the bootstrap styles, build links to the javascript files, and then build the proper tags <.> that use the classes and styles in the.css files. 1) Start a new web site we will use for Project 4 a. In VS New WebSite (point to your desktop), name the folder project4lastname b. Create the following folders: images, docs, includes (others will come shortly) c. Add a new HTML page, name it: default.html page to your site d. Shrink Visual Studio 2) Go to \\miscapstone\mis310\inclassassignments a) Look for the folder named bootstrap b) Copy the CSS folder into your project4 folder on your desktop

2 c) Copy the fonts folder into your project4 folder d) Copy the js folder into your project4 folder. 3) Expand VS hit and hit the refresh or recycle icon and you should see all of your new folders 4) Go to getbootstrap.com and scroll down the page until you find the heading Basic Template, click to copy this basic template and replace ALL the code you have in your default.html page with the code you just copied a. Notice the code has built the links for you to the.css files and the.js files as well as some additional files that are in the bootstrap libraries. b. Change the title tag to be your name c. Return to the getbootstrap.com page and look at the examples shown 5) Save and run your page in Chrome, it won t look like much at this point but we are checking for any errors messages. 6) Now let s add in a nav (menu) that will resize itself based on the width of the device. a. Copy and paste the following into notepad and then paste into your body of your document above the h1 tag (roughly line 21) <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" datatoggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> </button> <a class="navbar-brand" href="#">project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div> </div> a. If you don t like the black background, you could go to the bootstrap.min.css and search for navbar-inverse style and change the background color to another choice (do at the end if you desire). b. Save and test and you should have a menu of Home, About and Contact at the top of the page c. Once you confirmed the above works, let s customize for your project.

3 a. Revise the line that says Project Name to be your Name or your Project Name (i.e. the church, non profit etc) as in: <a class= navbar-brand href= default.html >My Name</a> d. Replace the <li> lines that have Home, About and Contact to be your Project 3 file name (the links in your existing nav): <ul class="nav navbar-nav"> <li ><a href="default.html">home</a></li> <li><a href="products.html">products</a></li> <li><a href="activities.html">activities</a></li> <li><a href="feature1.html">feature 1</a></li> <li><a href="feature2.html">feature 2</a></li> </ul> 7) Save and test your new menu, reduce the size of the page width and you will notice your menu will become a drop down list. 8) Add in the command to use your includes file you created for the footer. Place this include command immediately before the comment for jquery near the bottom of the page (remember the include will not show on the page until you move to the miscapstone server):   9) We will now use this page as a template page for the rest of your pages 10) Once you have tested the above. Stop running and then copy and paste the default.html page, do once for each of your pages you will need (i.e. if you had 3 pages before you will need 2 copies). You do not need to make copies for your feature pages. a. Once you have copy and pasted the copies, rename the pages to your original names as in products.html, actitivies.html, etc.. Note: leave Default.html as your starting page, do not rename to your old name as many of you have home.html, htmlhome.page etc. 11) Save all and start to run from your default.html page, if you click the top menu you should go to the new pages (that will have no content at this point), but you should be able to see all the page names in the HTML URL links at the top of the browser. B. Move your previous content to the new pages (the following will be for your default page). 1. To make it easy to copy from your old files, make a copy of your Project3 Folder on your desktop. Rename the HTML files to include the name OLD in them as in: HomeOLD.html, ActivitiesOLD.html etc. Do NOT rename the old

4 feature1, feature2 pages as we will not modify them and just copy them to the new project. 2. Once you have renamed all your files, copy them and paste (including the feature files that have not been renamed) into your Project 4 folder. 3. In Visual Studio, hit refresh (right click on your project name) and you should see your OLD files in the Project 4 folder 4. From your old Home (or default) page, copy the <header> to </header> commands into your new default.html. Replace the <h1> tag that is on the page with your <header> instructions a. Above the new <header> commands you just added, add one more command: <div class= container > and then place a </div> after the include statement for the footer. 5. Save and run this page. You might notice two problems, one part of the header is hidden partially under the new NAV and you lost your styles. 6. Slide your main.css file into the head segment of the new default.html page, however you should delete (or remark out) any of the nav styles in your main.css as they will conflict with the nav styles for bootstrap.css. 7. In addition since the new nav menu is at the top we will need to move the <header> down some, so add a margin-top:60px; style in your main.css for header. 8. Finally, remark out the body styles at the top of the main.css page 9. Save and run your page and your header should appear as before. 10.Copy the remainder of your OLD page content to the new page, save and view, your new page should be similar to the old page. Shrink the browser size and you should see your page respond to the smaller size. 11.Repeat the process for the other pages in your project. You do not need to redo the Feature1 and Feature 2 pages to bootstrap. C. Convert the new NAV menus to an include 1. Using the process we did with the footer, convert the new <nav> menu items into an includes file in the includes folder. 2. Then revise the html pages to use the include file versus having the nav menu on every page (excluding features pages)

5 3. Remember you need to place your folder on the miscapstone server and run as an page in order to see the includes execute D. Extra Credit Opportunity (2 to 8 points depending on complexity) 1. Review the bootstrap guide at as well as the getbootstrap.com page 2. Incorporate one of the features show onto one of you pages 3. To receive the points, you must include what feature you added and what page it appears in your indicating the project is ready for grading. Grading: 1. Upload to your MIS Capstone Folder 2. Send an to janickit@uncw.edu, with the subject line: MIS 310 Project 4 ready for grading. If you did extra credit, insure you put that info in the . Items to remember and check: 1. All pages should have a title tag in the head section describing your page (different on each page) 2. All images MUST have descriptive alt tags 3. Clarity, appearance will matter 4. Look for squiggles, yellow tags etc and fix! 5. Fix prior errors

The Structure of the Web. Jim and Matthew

The Structure of the Web. Jim and Matthew The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop