BTI220 notes – Tue Jul 23

Today’s session begins with the mid-course Test. Then, we move on to some web client development topics.

.

Mid-course Test is today

The BTI220 mid-course test is on Tuesday, July 23, 2013, at 9:50am ET.

Complete details are on the Test info page.

.

Preview of the next three weeks (six class sessions)

Well, we’re half-way through the course. Here’s a brief preview of the web development topics that we’ll spend some time on in the next three weeks (in no particular order):

More about…

  • Hyperlinks (on-page etc.)
  • DOM modification with JavaScript
  • Menus, multi-level, binding to a data source, etc.
  • Layouts, multi-column, etc.

Images for page elements

Images for page content

Introduction to JavaScript libraries

HTML Forms

Web services, and calling a web service

Media other than images – audio, video, canvas

Adaptive layout to accommodate smartphones and tablets

Print media styles

.

Programming assignment introduction

This course has one programming assignment. We’ll introduce it today.

.

More about hyperlinks

Normal links – reference info from MDN, W3C

.

Links that open in a new window/tab

Use the ‘target’ attribute

Be careful, use appropriately

.

Links that surround images

Default styling adds a border to the image – ugh

Maybe add a rule, ‘a img’, to remove the border

.

Page links (aka bookmarks)

Can create on-page navigation

Need two pieces:

  1. an “anchor”, which is an a element with an id attribute
  2. a normal hyperlink element, with an href set to an id value, prefixed with a pound/number sign ( # )

For example, this is an anchor:

<a id=moreinfo>More information about our product</a>

This is a hyperlink that references the anchor:

<a href=#moreinfo>Click here to see more information about our product.</a>

.

Additional discussion about the format of a URL

scheme – host – domain – portpath-to-resourcequery-stringfragment

http://www.example.com:8080/path/to/info?q=hello&w=world#moreinfo

The parts after ‘domain’ are optional

.

It’s often useful to add anchors to your page, even if you don’t include hyperlinks to the anchor

If you’re consistent, you can then use them from other pages

You may remember the following from the July 11 class notes…

IBM Web Developer – Mastering Ajax, Part 4
This is from 2006, but it explains some things well
Read these sections:
A closer look at Web browsers
Introducing the DOM

Both those hyperlinks includes a fragment identifier – that’s how you use them from a different page

.

Often you’ll see hyperlinks with href=#

By convention (but not standard), it simply will navigate to the top of the current page

.

Download a resource 

HTML5 introduced a ‘download‘ attribute for the ‘a’ element. Here’s its description from the W3C:

The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default file name that the author recommends for use in labeling the resource in a local file system.

When the user clicks on the ‘a’ element’s text, the browser will display an “open or save” dialog, instead of navigating to the URL in the ‘a’ element’s ‘href’ attribute. Outstanding. (May not work yet in IE.)

<p><a href='gallery-grid.png' download=GalleryGrid>Gallery grid image, png</a></p>

.

gallery-download

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: