Web Design 3: Week # 10

Quiz time!

Please take Quiz # 8 on D2L!

Lynda

So, just like last time, I'll be providing notes for the content in the Lynda.com videos. I know the students for this quarter are online, so I figure videos help more than anything else. Please give me feedback so I know if this is a good/bad/whatever approach (always). Thanks!

Learning Time

• This week, we'll be covering how to create JavaScript components using Bootstrap. 
• Our first JavaScript project will be the carousel. A carousel is just an image gallery that shows one image at a time. The user can change the image in the gallery using buttons on the sides. 
• Start off by creating a div and give it a class of "carousel". Within this div, create another div and give it a class of "carousel-inner". Once you have those see, you can start creating divs that will wrap around the images you want to display in a carousel. These divs will have a class of "item". Again, be sure to have a "item" div surrounding each img element. 
• Adding a class of "active" to the div containing the image will display that image in the carousel. 
• Next Page

Using JavaScript Components - Creating a Carousel

Learning Time

• Now comes the fun part. You can make the carousel run automatically by giving the attribute and value to the "carousel" div  of "data-ride=carousel". This will make the slides transition every 5 seconds. If you want the slides to slide in on transition, give the div an additional class of "slide". 
• Once you have the carousel, you can add buttons to it for moving the images left and right.  
  • Left button: Create an anchor link and giving it the class of "left carousel-control". Then, give it an attribute of "role" with a value of "button". Then, give the anchor an attribute and value of "data-slide" and "prev". Once you have this part, create a span tag and give it the classes of "glyphicon" and "glyphicon-chevron-left". See next page for right button.

Using JavaScript Components - Creating a Carousel

Learning Time

• Right button: Copy the code from the left button, but change the class of the anchor tag from "left" to "right".  "data-slide" will then be changed to "next". Then, change the "glyphicon-chevron-left" to "glyphicon-chevron-right". If you refresh your page, you should see the icons and they should be functional.
• If you want to add dots on the page for navigation, you can create an ordered list. Then, give the ordered list a class of "carousel-indicators". Add some list items to the ordered list and give them each a "data-target" and a value of "#featured". Then, be sure to give an attribute of "data-slide-to" and a value of either 0, 1, 2, etc. depending on which slide you want to give it. Then, give the class of "active" to the slide that you want as default.

Using JavaScript Components - Creating a Carousel

Learning Time

• If you want to hide your carousel at the small breakpoint, add a "hidden-xs". You can use a similar convention for the other sizes.
• You also have the option of manipulating the carousel using the "carousel()" method. This works by simply calling the method on the container with the class of "carousel". You can change the length of time it takes for each image to go to the next one by using the "interval" property and giving it a value in milliseconds. Other properties include pause, keyboard, and wrap. 

Using JavaScript Components - Creating a Carousel

Learning Time

Modals are just pop-up boxes that appear when an event is triggered. 

• To create your first modal, create a button element in html and give it a class of "btn" and "btn-warning". Then, give the button element an attribute of "data-toggle" and a value of "modal". 
• You are then going to set an attribute of "data-target" and the value is going to be the id of the target. That is, the id of the element you're trying to make appear in a pop-up box.
• Next, we're going to create the pop-up box. Create a div element and give it a class of "modal". Then, give the element the same id that you put into the "data-target" attribute inside the button element. You can also create "tab-index" as an attribute and give it a value for those who are disabled. 

Using JavaScript Components - Modals

Learning Time

• Add an attribute of "role" to the div and give it a value of "dialog". You can also give the element an attribute of "aria-labelledby" and give that a value of "modalLabel". 
• In this div, create another div with a class of "modal-dialog". Give this div element a "role" of "document". Inside this div, create another div and give it a class of "modal-content". 
• Create another div within the "modal-content" div and give it a class of "modal-body". 
• You can now add whatever text elements you want (h1, p, etc) to the "modal-body". The modal should now work and you can enter and exit out of it as much as you wish by simply clicking in and out of it.
• You also have the option of creating a button within the body of text to close the container. This can be done with creating a div

Using JavaScript Components - Modals

Learning Time

• with a class of "modal-footer" and putting it right next to the "modal-body". Then, give the "modal-footer" div a button element and give this button element an attribute of "data-dismiss" and a value of "modal". Then, put the text for the button within the element. This will enable you to close the element using whatever text you want. 

Using JavaScript Components - Modals

Learning Time

• You can start creating controlled tabs using an unordered list and giving the ul element the classes of "nav" and "nav-tabs". Give the ul element a role of "tabList".
• Next, add some list elements. These list elements are going to represent the tabs in the unordered list. 
• The list elements are going to have a role of "presentation".
• Create anchor elements within the list elements and give them a role of "tab". Set the "data-toggle" attribute to "tab" and the href to the id of the element you want the tab to go to.
• Adding a class of "active" will highlight the tab you're currently on.
• Next, we're going to create the content that the tabs are going to. To do this, we're first going to create a div with a class named "tab-content". Then, we're going to create a div for each tab that 

Using JavaScript Components - Controlling Tabs with JavaScript

Learning Time

• we have.  Be sure to give each of these tabs a class of "tab-pane" and a role of "tabpanel". Then, give each one of the divs an id of corresponding to the tab. 
• Finally, be sure to add a class of "active" to your div element that you want to show when the page first loads. This should correspond to the tab you also gave a class of "active" to. 

Using JavaScript Components - Controlling Tabs with JavaScript

Learning Time

• Collapse
  • Create an anchor element with an id of the element you want to connect to. Give the anchor element an role of "button", a data-toggle of "collapse", and the classes "btn" and "btn-primary". You may also add the attributes and values for screen readers. Note that you also have the option of having a button element instead of an anchor element. The only difference would be to change the "href" attribute to "data-target".
  • Next, create a div with a class of "collapse" and an id that matches the href of the anchor element. Then, add some content within the div. This will 

Using JavaScript Components - Creating Collapsible Content and Accordions

Learning Time

• Accordion
  • Create another div and give it a class of "panel-group" and an id of "accordion".  Create an additional div and give it the classes of "panel" and "panel-default". 
  • Next, create another div and give it a class of "panel-heading". Give this div an id of "headingOne" and a role of "tab".
  • Copy and paste the anchor element we had earlier into this div. Create an h4 element and give it a class of "panel-title". Place the anchor element within this h4 element.
  • Remove the classes and instead add a "data-parent" of "accordion".
  • Create another div element underneath the "panel-heading" element and give it the classes of "panel-collapse", "collapse", and "in".

Using JavaScript Components - Creating Collapsible Content and Accordions

Learning Time

• Accordion (continued)
  • Add an id to the div corresponding to the href of the anchor element.
  • Add a role of "tabpanel" to the div. 
  • Give this div an "arealabeledby" attribute with a value of "headingOne"
  • Place another div within the "panel-collapse" div and give it a class of "panel-body". Now, you should be able to add any text elements within this div. 
  • You now have a basic accordion. If you want to add multiple accordion elements, simple copy and paste the code and then change the id of the "panelHeading" div and the id of the anchor tag to match that of the content you want expanded and collapsed. 
  • Note that the "in" class is only for the accordion element that you want expanded by default, so you can remove it from other divs if you don't want them to show on page load. 

Using JavaScript Components - Creating Collapsible Content and Accordions

Learning Time

• A tooltip is a message that appears when you hover over something, usually explaining what that something is. For example, if you hover over an icon in some websites, it will usually give some information as to what the icon does. 
• You can start by creating an anchor tag with an the attribute/values of "data-toggle=tooltip", "data-placement=bottom (this can also be top, left, and right)", and "title=WHATEVER TEXT YOU WANT TO APPEAR IN THE TOOLTIP". The href attribute can be left as "#" if you don't want it to go anywhere, otherwise just put in the url. 
• Wrap the anchor tag around whatever you want to make a tooltip. For example, if you wanted the word "reptile" to have a tooltip, you would surround "reptile" with the anchor tag. 
• Finally, go to the JavaScript and using jQuery selectors, put in the following code:

Using JavaScript Components - Creating a Tooltip

$('[data-toggle="tooltip"]').tooltip();

Learning Time

• A popover is very similar to a tooltip, except that you can add much more content within a popover and a popover is activated on click.
• Start off by creating a button element. Then, give this button element a "type" attribute with a value of "button". Add the classes for a button: "btn btn-default". Add some additional attributes/values including "data-container=body", "data-toggle=popover", and "data-placement=bottom (or top, left, or right)".
• Next, go to your JavaScript and add the following: 

Using JavaScript Components - Adding a Popover

$('[data-toggle="popover"]').popover();

Learning Time

• If you want a navbar to appear as you scroll down a page, then you generally want to use the ScrollFix or Affix functionality. 
• To make your navbar appear fixed, add the attribute of "data-spy" and a value of "affix". Next, be sure to give the width of the navbar a value of 100% and set the z-index to be higher than any other element on the page (so that it appears above the others). 
• You can also make the navbar only appear after the user has scrolled down a certain number of pixels using the "data-offset" attribute and then giving it a value of pixels in height. This way, the navbar doesn't appear until you reach the bottom of the page.
• Be sure to also add the attributes/values of "data-target="CLASS OF NAVBAR" and a "data-offset: 50" to your body element; this is done in order to make your navbar appear above the body of the page instead of covering it. 

Using JavaScript Components - Controlling Menus with ScrollFix and Affix

Discussion

Don't forget to answer the discussion question for the week!

"What were some of the most difficult parts of building your project? What were some of the easiest?

Final Project

Details of the final project are on the next page, but they are the same as I have mentioned before. This week, you will be implementing one javascript widget and publishing your site to a live server. Next week, when you turn in your project, please be sure to zip your project and also submit a link to your live site. There are a variety of free web hosts including Github Pages and Heroku. Please let me know if you have any questions BEFORE you turn in your project. Your final projects will be due on Sunday at midnight. 

Again, please see the next page for details on the final project.

Final Project

Using the concepts covered throughout class, design a single-page website on top of Bootstrap. Your solution must demonstrate at least 4 sections, a fixed navigation to navigate the sections, and conditional content/layout based on size of screen.

• Bootstrap Foundation Using Bootstrap as the foundation of your website.
• Bootstrap Grid Solution demonstrates use of rows and 12-column grid
• Bootstrap Widgets 3 Examples of Bootstrap Glyphicons, One example of a Bootstrap table, contact form and JavaScript widget.
• HTML5 and CSS Proper use of structural HTML and CSS to Cascade from Bootstrap's framework. External CSS to control global look
• Responsive Navigation Pinned navigation after user scrolls window. Links animate the scroll of the window. And when the user is in mobile view, the menu tucks away into a hamburger menu.
• Live Link In addition to sending me your files, please also include a link to the live version of your project.
• Aesthetics Your solution is designed - considers compositional aspects of your layout and the Principles of Design (e.g. balance, unity, economy)