GD 66 Class 10 + 11

Class 10 Topics: JavaScript, What is jQuery?, Drop down menus, Responsive Navigation, Final Project Design Comps, Take Home Quiz 3.

Class 11 Topics: Slideshows, Embedding a YouTube Video, Embedding a Google Map.

Announcements

  • Please post your Assignment 8 (embedded fonts) and Assignment 9 (responsive navigation) to your student folder on the class server.
  • Be sure to bring your assignments and final project files to class every week.

Class 10


JavaScript

What is it?

JavaScript is a programming language that forms the the last leg of the modern web design and development trinity: HTML, CSS, and Javascript.

It allows for interactivity and greater control of web pages in the web browser.

  1. HTML deals primarily with structure
  2. CSS deals with visual presentation
  3. Javascript is the brains or logic

There are a number of code frameworks (jQuery, AngularJS, Backbone) that have become prominent for their ease of use, most of which are within the reach of designer’s to learn a bit about and use to create new experiences. We will focus on jQuery, primarily because of the large community of developers and availability of useful plug-ins.

Where does it go?

JavaScript is commonly included in the head tag of web pages. Much like style sheets it can be embedded in the document or linked to an external file. To include an external file such as a plug-in we use something like the following piece of code:

There is also a practice of including scripts in between the </body> and the </html> tag at the bottom of page. This allows the page to load before running any scripts. I’ve seen primarily for google analytics scripts, although it may be useful for others. Although the document ready function takes care of this for the most part.

Example: Random Background Image

Create a Random Background image

Embedded JavaScript looks like the following:

Here’s the example: http://www.everythingaboutweb.com/classes/examples/background_image/

Here are the files: http://www.everythingaboutweb.com/classes/downloads/background_image.zip


jQuery Basics

See http://jquery.com/

jQuery is an open source library of javascript objects that we can use in our front-end web development and design. These objects are referred to as Plug-Ins and includes things like galleries, animation, as well as control of page elements.

Where do I start?

First step is to include the jQuery library in our pages:

Link to the Google CDN hosted jQuery library:
Google API Documentation: http://code.google.com


jQuery Plug-ins

Plug-ins expand the function of the jQuery library. Our next step is to find a plug-in we want to use.

There are a couple of ways to search for plug-ins. One method is to search for them on jQuery. The interface is a bit lacking, but almost all plug-ins listed feature link to the plug-in site, which usually has the download and an example.

The other method is to leverage the wonders of the internet and search the blog lists for plug-ins. Articles abound. Pick a recommended plug-in, download and get it going.

We can include plug-in files locally (a .js file in your js folder) and sometimes they are hosted on another site and we can just link to them like we do to include the jQuery library hosted at Google.

jQuery Plugin Resources

Super Useful jQuery Plugins for Responsive
http://www.catswhocode.com/blog/super-useful-jquery-plugins-for-responsive-web-design

Choose plugins that are built to be responsive:

Unheap – A tidy repository of jQuery plugins
http://www.unheap.com/

jquer.in – Collection of jquery plugins and javascript libraries
http://jquer.in


Responsive Drop Down Navigation

First, we’re going to build a brand new drop down menu using our files from our everything about web HTML 5 responsive exercise.

Demo:
http://gd66.smcgrdes.com/html_demos/html5-dropdown-responsive-style/

Download the starter files here: 
http://gd66.smcgrdes.com/html_demos/html5-two-column-style-responsive.zip

Step 1

Remove the current CSS for the navigation (keep the class for .highlight) and mark up a new unordered list for the navigation.

Notice how the sub-navigation is created by nesting an unordered list between the opening and closing list tags for the top menu item.

Also, note that each top menu list item that has a drop down is marked up with the class=”subNav”

Now, let’s add the new CSS for the navigation.

Step 2

Add CSS for new navigation.

Add CSS for subnav.

Step 3

When we positioned the navigation absolute, the navigation overlaps the content and right column. Let’s add a top margin to both divs.

Add to content and rightcol divs:

Step 4

Let’s go ahead and style the footer a little more and add a background color to the footer and padding-top to the paragraph of the footer.

Add to footer:

Add to footer p

Okay, now let’s go ahead and use the jQuery plugin SlickNav to create the slick responsive navigation

For the long version demo for creating a Drop Down menu, see the tutorial here:
http://www.everythingaboutweb.com/css-navigation-menu-drop-down/

SlickNav Demo

SlickNav Demo page


Don’t want to use SlickNav?

Here are other options:

http://responsivenavigation.net/


Centered Responsive Drop Down Navigation

Source: http://cyberchimps.com/guide/how-to-center-main-header-menu/

Demo: http://gd66.smcgrdes.com/html_demos/html5-dropdown-centered-responsive/

Download files: http://gd66.smcgrdes.com/html_demos/html5-dropdown-centered-responsive.zip

Add media query:

What is display: inline-block

display: inline-block; /* Characteristics of block, but sits on a line */

http://css-tricks.com/almanac/properties/d/display/

 

Class 11


Nivo Responsive Slider Demo (jQuery plugin)

Demo:
http://gd66.smcgrdes.com/html_demos/Responsive_Slideshow/final_web/index.html

Nivo Documentation:
http://docs.dev7studios.com/jquery-plugins/nivo-slider

Download the starter files here: 
http://gd66.smcgrdes.com/html_demos/html5-dropdown-responsivenav-style.zip

Add Settings

Additional settings can be added to the script in the head of the HTML.


z-index

If the drop down navigation does not drop down in front of my content (image, text or slideshow).

Without any z-index value, elements stack in the order that they appear in the page.

Here’s the fix. Add the following to the CSS:

  1. Assign a high z-index value to the div containing the navigation menu (value of 10, for example).
  2. Change the position of the div containing the navigation menu. Change it to “absolute” to bring it in front of the content.
  3. Assign z-index: 0 to the div containing the content.

http://css-tricks.com/almanac/properties/z/z-index/


How to embed a YouTube video

http://www.google.com/support/youtube/bin/answer.py?answer=171780

 


How to embed a Google map into a website

You can embed a simple map, a set of driving directions, a local search, or maps created by other users. Here’s how:

  1. Ensure that the map you’d like to embed appears in the current map display.
  2. Click Maps Link Button at the top of the left panel.
  3. In the box that pops up, copy the HTML under ‘Paste HTML to embed in website,’ and paste it into the source code of your website or blog.

If you’d like to adjust the size of the map before you embed it, just click Customize and preview embedded map, select your preferred size, and take a look at the preview map. Once you’re happy with what you see, copy the HTML that appears in the box at the bottom of the window.


View Larger Map

Responsive Google or Bing Maps

http://niklausgerber.com/blog/responsive-google-or-bing-maps/

Leave a comment